Before we get started, test to see if QuickTime is installed on your computer. Version 7.2 just came out this week; it adds several security fixes and one long-requested feature. However, there have been reports of problems on some computers, so you may want to wait until the dust settles.
One of the most elegant techniques for embedding movies in webpages is with a poster movie, typically a single frame or a short looping segment sized to the same horizontal and vertical dimensions as your feature movie. Poster movies stake out space for other movies without gobbling up the bandwidth you'd need to embed the main movie. When a visitor clicks the poster, the main movie replaces it in the browser window and starts loading. On YouTube, default poster movies show up as a blurry mess with the triangular Play button inside. With the techniques I'm about to demonstrate, you can use a crisp, beautiful image instead and avoid the blurry mess.
Fig. 1: Drag a background image and a movie onto QTBridge Stampot and the program generates an elegant poster movie, complete with hand cursor. The left image shows the movie before it's clicked; the right shows it during playback.
Notice that the poster image is also wrapped in a link to the movie file, which is what makes it clickable and generates the hand cursor. Furthermore, because it's a standard
Craig Smith in O’Reilly's European office wondered if there were a way to use the technique to play multiple movies on a long blog page. He'd found that simply duplicating the two divs resulted in each new trigger link playing back in the first movieplayer div on the page. I suggested he use unique IDs for each trigger/media pair, and he was back in business. Here's an example with three movies; Craig is also using the technique to play MP3s by setting the movie height to 16 pixels, the height of the QuickTime controller.
<div id="trigger2" style="display:block" align="center"> <a href="reason-workshop.mov" target="_blank" onclick="loadMovie('movieplayer2','trigger2');return false"> <img src="QT-reason-poster.jpg" alt="Click to Play" width="320" height="256" border="0" /></a></div>
And here's the script:
The revised poster code was a bit shorter, but it was still redundant. What if, instead of hiding the trigger and revealing the player, we rewrote the trigger on the fly? That idea led to this new link format:
<div id="trigger3"><a href="examples/movie3.mov" target="_blank" onclick="loadMovie(this.parentNode.id,this.href,'160','136'); return false"><img src="graphics/poster3.gif" alt="Click to Play" width="160" height="136" border="0" /></a> </div>
Here, the link passes the trigger div ID (
this.parentNode.id), the movie URL (
this.href), and the movie's height and width to the function
loadMovie(). That function in turn calls a little-known function in the Apple QuickTime embedding script called
QT_GenerateOBJECTText_XHTML, which returns the text of the embedding code without writing it onto the page. Finally, I use the innerHTML method to replace the contents of the trigger div with the movie embedding code:
And here it is in action. The voice is from the Cepstral speech synthesizer. I made the music in Ableton Live and then generated the video in Boinx FotoMagico 2, which produces almost Flash-like text animations.
Here's an in-progress script to play multiple movies in a single player. I still need to figure out how to remove the currently playing movie so movies don't stack up.
The links are very simple:
<a href="movie1.mov" target="_blank" onclick="insertMov(this.href,'320','256'); return false">Movie 1</a>
Movie 1 | Movie 2 | Movie 3 | Movie 4 | Movie 5
In the script above, notice that I added another parameter,
scale, to the QuickTime function call. Its value is
ToFit. That causes the small movies to scale up to the size of the container. You can also specify
Aspect, which maintains the movie's proportions, or a number. (For example, 2 would double the size and 0.5 would halve it.)
Fig. 2: See QuickTime code appear before your eyes as you change parameters in Pageot. (Click to enlarge.)
One of the cool things about Pageot is how it simplifies the creation of movie playlists. In the example below, Movie 1 will call Movie 2 when it ends, and on to Movie5. Then the sequence will loop back to Movie 2. All of that plus much more is customizable.
Here's the code:
For years, multimedia designers and viewers alike have wanted an easy way to present QuickTime movies in fullscreen mode without coughing up $30 for QuickTime Pro. Workarounds included substituting an old version of the QuickTime Player and invoking AppleScripts, but that required viewers to have technical savvy (and a Mac in the latter case). And it didn't work for movies launched from Web pages.
SoundScreen.com describes a elaborate solution for Web designers that involves creating an intermediate XML file
. This text file, called a QuickTime Media Link, contains embedding code that instructs the QuickTime Player to present the movie in fullscreen mode. I tried the technique with various files and found it worked well on a Mac, but crashed QuickTime Player in Windows with a buffer overrun error. Thankfully, that bug is fixed in the latest version of QuickTime, 7.2. Even better, version 7.2 finally restores fullscreen playback to the non-Pros.
However, unless Apple adds a
fullscreen parameter to the list of QuickTime embedding attributes, I don't think there's a way to specify fullscreen playback directly from a webpage. If you do have QuickTime Pro, there's a simple workaround, though:
The easiest way to launch a movie from a webpage and have it fill the screen is to enable the movie's internal
fullscreen parameter in QuickTime Pro. You then set the webpage's embedding code to open the movie in the QuickTime Player.
Here's what the code might look like. You can also tell the movie to start playing automatically by adding the attribute pair
'autoplay','true' here, but I opted to set that in the movie itself (see screenshot).
Try it (you won't see a hand cursor, but click anyway): Note that fullscreen playback may crash some Windows browsers using old versions of QuickTime.
The amazing QTBridge gallery demonstrates a similar effect by opening the QuickTime movie in a self-expanding popup window and setting the QuickTime
scale parameter to
ToFit. Because the computer's menu bar and the browser's window frame remain in view, that presentation can be less startling to visitors.
The more I play with QuickTime, the more amazed I get at its capabilities. Check out the Reference and Examples sidebar links and you're sure to get inspired too.
Apple: HTML Scripting for QuickTime — I found this one especially clear and useful.
Backstage Brennan Young's intriguing experiments on synchronizing movies
QTBridge — Makers of free and inexpensive QuickTime utilities for Mac and PC; be sure to visit the galleries, links, and tutorials.
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.
Copyright © 2009 O'Reilly Media, Inc.