Problem: Poster frames make displaying multimedia content on your website user-friendly. Instead of presenting visitors with a page that requires an immediate download of a large movie file, poster frames give visitors the ability to see what the movie is about and choose whether they want to download it.
Solution: Create a single-frame poster movie and specify it in the src attribute of the QuickTime code on your webpage:
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab"
width="640" height="496">
<param name="src" value="poster.mov">
<param name="href" value="movie.mov">
<param name="target" value="myself">
<param name="autoplay" value="true">
<param name="controller" value="false">
<param name="pluginspage"
value="http://www.apple.com/quicktime/download/indext.html">
<param name="type" value="video/quicktime">
<embed src="poster.mov" href="movie.mov" target="myself"
width="640" height="496" autoplay="true"
controller="false" border="0"
pluginspage="http://www.apple.com/quicktime/download/indext.html"
type="video/quicktime"></embed>
</object>
To ensure cross-browser capability, you should use both the object and embed tags to display a QuickTime movie on a webpage.
Ordinarily, the value of the src attribute would be the path and file name of the full movie. When you want to display a poster frame first, you specify its path and file name with the src attribute and use two other attributes -href and target-to load the full movie when the user clicks the poster frame image (as shown in Figure 1).
Figure 1. Using a QuickTime poster frame prevents the full movie from downloading until the visitor is ready to view it.
Creating a poster frame
For best results, I recommend using Adobe ImageReady and QuickTime Pro to create a poster frame, though you may be able to complete the required steps with other tools.
The poster frame is actually a single-frame QuickTime movie. To start, open the full movie in ImageReady, where you will immediately see the “Range to Import” dialog box. Move the slider under the movie preview to select the scene you want to use as a poster frame, then choose “Selected Range Only,” and click “OK.”
You don’t have to use a frame from the full movie for the poster frame. Any properly sized and formatted image will do.
Save the imported image as a Photoshop (.psd) file. If you plan to show the QuickTime controller on the full movie, add 16 pixels to the bottom of your still image. In other words, a 320×240 pixel movie with the controller takes up 320×256 pixels of space on the page, so size your poster frame to match. The bottom 16 pixels are a good place to put the “Click to Play Movie” text over a black or colored bar. Add the instruction text, then flatten the image into one layer, and save the file.
In QuickTime Pro, open the image you just created and select Export from the File menu. Use the Movie to QuickTime Movie export scheme to save the poster frame movie. You also may adjust the Options as you see fit to adjust the export quality; you also can tweak several other settings in order to create a smaller file.
The full movie and poster movie must be saved in the same directory on your webserver.
Discussion
Poster frames make displaying multimedia content on your website user-friendly. Instead of presenting visitors with a page that requires an immediate download of a large movie file, poster frames give visitors the ability to see what the movie is about and choose whether they want to download it.
See Also
Apple Computer has a tutorial on all the tags and attributes you can use to display a QuickTime movie on a webpage at http://www.apple.com/quicktime/tutorials/embed.html.
Excerpted from Web Site Cookbook, Copyright 2006 O’Reilly Media Inc. Used with permission. Doug Addison is a freelance journalist and Web producer in Austin, Texas. You can contact him at doug@daddison.com.
