Two Slick QuickTime Tricks
Pages: 1, 2

Slick Trick 2: Click to Play…with Posters

If you simply put a link to a QuickTime movie on your web page, for example, <a href="movie.mov">Watch my movie</a>, there's no telling what will happen when your visitors click it. It might blank out the page and start playing. It might start downloading—or ask to—and then open in another program. Or it might trigger a plugin warning or security alert.



For that reason and more, Apple recommends that you embed the movie in the page instead. Embedding allows the browser to present the movie right in the web page, which many movie studios have used to dramatic effect. The basic movie-embedding code for a 320x240-pixel movie looks like this:


<embed src="movie.mov" height="256" width="320" />.

Note that the specified height is 16 pixels greater than the actual movie height to accommodate the QuickTime controller bar. You can add dozens of additional parameters to dictate how the movie plays.

One nifty attribute pair is the href/target duo. The former specifies a new movie to load when the visitor clicks the current movie, and the latter specifies where that new movie will open. If target = "quicktimeplayer", the movie will open in the QuickTime Player program rather than the browser. If target = "myself", the new movie will replace the current movie on the page. That lets you create a poster movie, a single-frame movie that reserves the space on the page but doesn't suck up bandwidth. If you embed movies directly, they will start downloading to the browser as soon as the visitor calls up the page, which needlessly slows page loading.

Here's the basic syntax for embedding a poster movie. Note that the path to the real movie is relative to the poster movie, not the web page. Also note the controller parameter. Because the poster movie doesn't actually play, we don't need a controller bar. So we hide the 16-pixel-tall controller bar and make the poster movie the height of the real movie plus 16 pixels:


<embed src="/examples/oreilly/digitalmedia/2006/09/poster.mov" width="320" height="256" href="real-movie.mov" target="myself" controller="false" />

I wanted to show an example of this method, but the embed tag doesn't validate as XHTML, so O'Reilly wouldn't let me! There are three additional drawbacks to the traditional approach to making poster movies. First, you'll need to take the extra step of converting your placeholder image to a single-frame .mov file. Not all graphic editors can do that. Second, the embed tag doesn't trigger the browser's hand cursor, so it's not obvious that the image is clickable. And finally, changes in the way browsers (most notably, Microsoft Internet Explorer) function require adding many more parameters to the embedding code above to make it work. A typical link now would look like this:

<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
    codebase=http://www.apple.com/qtactivex/qtplugin.cab#version=6,0,2,0
    width="320" height="256" align="middle">
    <param name="src" value="sample.mov" />
    <param name="autoplay" value="true" />
    <embed src="sample.mov" autoplay="true" width="320"
    height="256" align="middle" bgcolor="black"
    pluginspage="http://www.apple.com/quicktime/download/">
    </embed>
</object>

And yet, even that isn't good enough for the latest version of Internet Explorer, which, due to a patent dispute, automatically deactivates embedded media, forcing you to click twice and negotiate scary ActiveX warnings to get the media to play.

The most popular workaround is to embed the movie using JavaScript. Fortunately, offloading the increasingly complex embedding code to an external JavaScript file makes the main page simpler. After uploading the script to your site, you put a link to it in your page, like this:


<script src="http://www.yourdomain.com/AC_QuickTime.js" language="JavaScript" type="text/javascript"></script>

Embedding the movie then requires the following code. (There's also an XHTML version, which uses the function call QT_WriteOBJECT_XHTML instead.) The ActiveX version parameter is optional.

QT_WriteOBJECT(
    "contentURL", "embedWidth", "embedHeight", "activeXVersion",
    "attributeName1","attributeValue1",
    "attributeName2","attributeValue2",
    ...
    "attributeNameN","attributeValueN"
    );

So, here's the code for our poster movie example:

<script language="JavaScript" type="text/javascript">
    QT_WriteOBJECT('/examples/oreilly/digitalmedia/2006/09/poster.mov', '320', '256', '',
    'href','real-movie.mov',
    'target','myself',
    'controller','false'); 
</script>

And here's the code in action:

Note, however, that we still have the first two poster-movie problems: (1) there's no hand cursor, and (2) you have to convert your placeholder graphic into a single-frame QuickTime movie. So here's Slick Trick No. 2, a workaround I developed that uses CSS and JavaScript to swap a movie for a standard graphic:

<div id="movieplayer" style="display:none" align="center">      
    <script language="JavaScript" type="text/javascript">
    <!-- Hide script from sad old browsers
    QT_WriteOBJECT_XHTML('/examples/oreilly/digitalmedia/2006/09/reason-workshop.mov', 
    '320', '256', '');
    // -->
    </script>
</div>
    
<div id="trigger" style="display:block" align="center">
    <a href="/examples/oreilly/digitalmedia/2006/09/reason-workshop.mov" 
    target="_blank" onclick="javascript:document.getElementById('movieplayer').style.display='block';document.getElementById('trigger').style.display='none';return 
    false"><img src="/images/oreilly/digitalmedia/2006/09/QT-reason-poster.jpg" 
    alt="Click to Play" width="320" height="256" 
    border="0" /></a>
</div>

As you can see, there are two DIVs, one ("movieplayer") holding the movie and one ("trigger") holding a plain JPEG I'm using as the poster movie. The movie DIV is initially set to display:none, so the browser doesn't render it, saving bandwidth. When the visitor clicks the poster DIV, JavaScript displays the movie DIV and hides the poster DIV. Visitors with JavaScript disabled (or those who right-click the link) will just open the movie file normally, as if they had clicked a standard <A HREF> link.

Here it is in action, using movie clips I shot at Peff and GW Childs' Advanced Reason Workshop. Notice how this example also uses vertical movies, padded out to fit the standard 4:3 ratio with Slick Trick No. 1, and then enhanced with titles and a crossfade in iMovie:

Click to Play

It's a little more code, but it's more flexible, potentially faster, and friendlier to visitors, which is always good when you're sharing something of yourself.

David Battino is the audio editor for O’Reilly’s Digital Media site, the co-author of The Art of Digital Music, and on the steering committee for the Interactive Audio Special Interest Group (IASIG). He also writes, publishes, and performs Japanese kamishibai storycards.


Return to digitalmedia.oreilly.com