The more I play with QuickTime, the engine that seemingly powers all of Apple's impressive multimedia software and presentations, the more useful tricks I discover. Often these discoveries arise from annoyances. I learned about masking when confronted with some movies bloated by ugly, RAM-gobbling borders. (Here's how to slice them off.)
In this article, I'll share two more unusual techniques I've developed: how to bring vertical movies into a workflow designed for horizontal ones, and how to embed movies in a web page without messy wads of code. Before we get started, test whether QuickTime is installed on your computer.
Sometimes a scene just cries out to be shot vertically, like the famous Oregon waterfall in Figure 1. Unfortunately, when I imported the waterfall clip into iMovie 6 for editing, the program squashed it to the standard 4:3 horizontal ratio (see Figure 2).
Incidentally, iDVD used to have this problem as well, but now it adds black borders to the left and right sides of narrow movies, which is exactly what we're about to do.
Figure 1: I turned my digicam sideways to capture the waterfall. After importing the movie into the computer, I used QuickTime Pro to rotate it 90 degrees so it would display correctly. The resulting movie was 480 pixels wide by 640 pixels tall, a 3:4 ratio.
Figure 2: iMovie was expecting a 4:3 movie, so when I fed it a 3:4 one, it squashed it like a bug.
For this trick, you'll need QuickTime Pro, which is definitely worth the $30 if you ever want to mess with QuickTime files. The first step in stretching the vertical movie back into shape is to create a black background image in the proportions iMovie expects. (Here, that's 4:3, though the same technique will work for 16:9 movies.) The process is similar to the one I described in "The Mask of QuickTime," in which the borders were too wide:
Command-Option-Shift-V.) You should see something like Figure 3, with a big, black rectangle covering most of the movie and pushing the sides of the window outward.
Command-J) and click the Visual Settings button. Select "Video Track 2" (the rectangle) from the track list, and increase its Layer number until you see the rectangle move behind the video. (See Figure 4.)
horizontal offset = (rectangle width - movie width)/2. In this example, that reduces to (853-480)/2, or 187 pixels. (Again, I'm rounding to the nearest integer.) Next, set the vertical offset to 0. (See Figure 5.) The movie will now be centered vertically and horizontally on the rectangle (Figure 6), and you can export it as a new file, ready for editing in iMovie or displaying on other devices that expect those proportions.
Figure 3: When you add the rectangle to the movie in QuickTime Pro, it pushes the sides of the window outward, but the movie itself gets pushed up and left.
Figure 4: Move the black rectangle (Video Track 2) to the back by increasing its Layer number.
Figure 5: The first Offset number is the horizontal displacement; setting it to half the rectangle's width minus half the movie's width will center the movie horizontally. The second Offset number is the vertical displacement; set it to 0.
Figure 6: The movie is now centered on the background, and has the 4:3 ratio iMovie expects. Now we just need to export it to a new file.
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.
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:
And here's the code in action:
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
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:
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
Copyright © 2009 O'Reilly Media, Inc.