Web Site Cookbook

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 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>

Tip

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 attributes—href and target—to 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 ...