Recipe 6.9. Adding a Poster Frame to a QuickTime Movie

Problem

You want to display a still image preview of a QuickTime movie placed on a web page.

Solution

Create a single-frame poster movie and specify it in the src attribute of the Quick-Time code on your web page:

 <object class         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="/books/2/2/1/html/2/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 web page.

Ordinarily, the value of the src attribute would be the path and filename of the full movie. When you want to display a poster frame first, you specify its path and filename with the src attribute and use two other attributeshref and targetto load the full movie when the user clicks the poster frame image (as shown in Figure 6-6).

Creating a poster frame

For best results, I recommend using Adobe ImageReady and QuickTime Pro to create a poster frame, although 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.

Figure 6-6. Using a QuickTime poster frame prevents the full movie from downloading until the visitor is ready to view it

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 Quick-Time controller on the full movie, add 16 pixels to the bottom of your still image. In other words, a 320x240 pixel movie with the controller takes up 320x256 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 may adjust the Options as you see fit to adjust the export quality; you also can tweak several other settings to create a smaller file.

The full movie and poster movie must be saved in the same directory on your web server.

Discussion

Poster frames make displaying multimedia content on your web site 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 web page at http://www.apple.com/quicktime/tutorials/embed.html.