A nice feature of the QuickTime plugin allows the designer to embed a small section of a movie (usually one frame), called a "poster" movie, and link it to the original, larger movie as seen below.
We will start with a small movie of a simple dog trick. You will need a QuickTime
movie to work with. Download paw.mov to your hard drive by right-clicking (control-click
on Mac) this link and save the link target
to disk. then open paw.mov using QuickTime Player Pro. Scroll to the frame
of the movie you wish to use as your still image. Choose Export from
the File menu.
Export the movie using the Movie to Picture setting. On Macintosh computers
the resulting file will be a PICT file (.pct). On Windows, export it as BMP
or JPG.
Open the still picture file in your favorite image editor. Add any desired text
and graphics. Be careful to not change the size of the original graphic. I
used AppleWorks to add some yellow text to the graphic.
Save the file as a GIF or JPG file or use PCT on Mac or BMP on Windows.
Go back to QuickTime Player Pro and choose “Import” from the FILE menu.
Locate the file you just saved and click open.
From the FILE menu, choose Export. Set the Export popup to export using the “Movie to QuickTime Movie” setting. then click the Options... button. In the options dialog box, click the Video check box, then click Settings.. and set the compression to Photo-JPEG, the quality to High, and the Frame rate to 1. Then click OK to dismiss this dialog and return to the main export dialog box.
In the Save As field of the main export dialog box, type
a name like “pawstill.mov” to
indicate it is a still frame version of the main movie. Then click Save.
Add the code to your HTML page to embed the still frame poster movie. When the user clicks the still frame, the full movie begins to download. The target and href attributes in the embed tag are set to load the new movie in the same space on the screen as the poster movie. View the code of this page and note how the controller is set to false on the initial poster movie. The autoplay attribute has been removed from the code because it is irrelevant for a still image. Also note that the HREF URL is relative to the location of the movie not the location of the page. Since the poster frame is displayed without a controller, it is necessary to specify a white background color to mask the extra 20 pixels allocated in the code for the controller needed for the full movie. Note also how the original frame has been altered in an image editing program (AppleWorks) to inform the user how to download the entire movie and how big of a download it will be.
The code below works in all major browsers on Macintosh, Windows, and even those Linux and UNIX platforms that can use the QuickTime plugin. The <embed> tag contents are wrapped within an <object></object> tag pair. Netscape browsers generally ignore the <object> tag and use the <embed> tag. The very latest versions of Internet Explorer on Windows XP, however, use the <object> tag and ignore the <embed> tag. By using both tags in this way, all browsers are supported. Notice how each parameter in the <embed> tag is also listed as a <param> contained within the <object></object> tag pair. The <param> tag has a / at the end to make it a self-closing tag in compliance with the XHTML standard.
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="160"height="140"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="quicktime/pawstill.mov" />
<param name="target" value="myself" />
<param name="controller" value="false" />
<param name="href" value="paw.mov">
<param name="bgcolor" value="#ffffff" />
<param name="autoplay" value="false" />
<embed src="quicktime/pawstill.mov" width="160" height="140" target="myself" controller="FALSE" href="paw.mov" bgcolor="#ffffff" autoplay="false" pluginspage="http://www.apple.com/quicktime/download/"></embed>
</object>
Poster movies work great with audio as well. The audio example below uses a small QuickTime movie called audiostub.mov.
UPDATE 2006: Apple Computer now recommends using JavaScript to embed all QuickTime content. This addresses a recent change in the way Internet Explorer on Windows now handles ActiveX controls. Using JavaScript ensures that visitors to your site have a trouble-free experience using QuickTime content. Dr. Estrella has developed a small Flash application to help you generate the appropriate code to embed a QuickTime movie. You can access it here. To use this generator you will also need the QuickTime External JavaScript file - right-click (Control-click on Mac) to download. Place it in whatever folder you use to store your external javascript files (ex. ../javascript/AC_QuickTime.js);