Creating a Poster Movie

Accessing a QuickTime movie on the Web introduces one big problem: whether you link to it directly or embed it onto a page, the entire movie begins downloading. Depending on the size of the movie, this could slow your browser or other Internet applications while the movie is being fetched.

As an alternative, create a poster movie, which displays a one-frame movie that your visitors can click to initiate the download. (Sometimes this can be frustrating: I've clicked on links expecting the movie to load in the background while I'm working on something else, only to realize that I needed to then click the poster movie to get the download started. Still, at least this route gives the visitor the option to start the movie at her convenience.) The poster movie has the added benefit of preloading the QuickTime plug-in before the movie starts.

Creating a poster movie involves two steps: creating the one-frame movie using QuickTime Player (the Pro version), then adjusting the EMBED tag in the HTML to properly handle it.

To create the poster movie:

1. Open your movie in QuickTime Player.

2. Use the movie control buttons or the location indicator to find a frame you'd like to use as the poster movie's image (Figure 15.19).

   Figure 15.19. Use the Playhead in QuickTime Player to locate the frame you'd like to use for the poster movie.

   

3. Choose Copy from the Edit menu, or press Command-C. This copies the selected frame.

4. Create a new movie by choosing New (Command-N) from the File menu.

5. Choose Paste (Command-V) from the Edit menu. Your copied frame appears as its own one-frame movie (Figure 15.20).

   Figure 15.20. To make the poster movie work, your one frame needs to be saved as a QuickTime movie, not an individual image format like TIFF or JPEG.

   

6. Save the movie with a distinctive name, such as "punkins_cdrom_poster.mov" (to use my example).

To embed the poster movie:

1. In your HTML editor, type the code you used to embed the movie (shown two pages back).

2. In the EMBED tag, add the HREF and TARGET attributes (underlined):

    <EMBED src="/books/2/42/1/html/2/sample_poster.mov" WIDTH="160" HEIGHT="144" AUTOPLAY="true" CONTROLLER="false" HREF="sample.mov" TARGET="myself" PLUGINSPAGE= "http://www.apple.com/quicktime/ download/"> 

   The HREF tag tells the browser to first load the poster movie, while the TARGET tag instructs it to play the real movie in the same space as the poster movie when clicked.

3. Save and upload your files. When you view them in a Web browser, the poster image shows up first (Figure 15.21).

   Figure 15.21. The end result is a single image that shows up in place of the movie, but one you can click to immediately begin playing the movie.

   

Tips

• If you're seeing only half of the movie controller, add 15 to the height values in the OBJECT and EMBED tags.

• Be sure the controller attributes are set to "false," or else you'll see a controller in the poster movie, which can be confusing. Viewers might click the controller to play the movie, which works but only plays the one frame.

• It's a good idea to include instructions near the poster movie that say something like, "Click to play movie."