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.

Slick Trick 1: Vertical Movies in a Horizontal World

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.

Fig. 1: Vertical Movie

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.

Fig. 2: iMovie Squash

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:

  1. In a graphics program, make a black rectangle that's as tall as your rotated movie (640 pixels, in this example) and as wide as the movie's height multiplied by 4/3. In this case, that's 640 x 4/3, or 853 pixels when rounded to the nearest integer. I used the GIF format for the rectangle because I've seen some flickering problems on Windows when using some other formats. Copy the rectangle to the clipboard.
  2. Now, open the vertical video in QuickTime Pro and select "Add to Selection & Scale" from the Edit menu. (The keyboard command on a Mac is 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.
  3. Open the QuickTime Pro Properties window (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.)
  4. Now select Video Track 1 (the movie) and align it horizontally with the rectangle. To do that, use the formula 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.
Fig. 3: Adding the Mask

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.

Fig. 4: QuickTime Layer Value

Figure 4: Move the black rectangle (Video Track 2) to the back by increasing its Layer number.

QuickTime Offset

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.

Fig. 6: Padded Movie

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.

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.


Return to digitalmedia.oreilly.com