Section 13.3. Posting a Movie on Your Own Web Site | iMovie HD & iDVD 5: The Missing Manual

13.3. Posting a Movie on Your Own Web Site

Posting movies on other people's Web pages is one thing. In many cases, however, you might prefer the control and the freedom of putting movies onto your own Web page, designed the way you like it.

You'll quickly discover that this process is more technical than the ones described so far in this chapter. For example, the following discussion assumes that you do, in fact, already have a Web site.

13.3.1. Playing the Movie in its Own Window

If you have a Web page, you're probably already familiar with the notion of FTP (file transfer protocol), the method you use to deposit new Web pages, graphics, and other elements onto your Web site. You do this using a program like Captain FTP or RBrowser, both of which are available for download from the "Missing CD" page at www.missingmanuals.com.

13.3.1.1 Setting up streaming playback

QuickTime provides a feature called Fast Start, which means that when a Web page visitor clicks your movie, he can begin to watch it before it's downloaded in its entirety. His copy of QuickTime estimates when enough movie data has been downloaded so that the whole movie can play without having to pause for additional data. The effect is a lot like the streaming video feature described earlier, except that there's a considerable pause as the first portion of the movie is downloaded. (On the other hand, you save thousands of dollars on the cost of specialized hardware and software that's required for a true streaming-video system.)

To take advantage of this feature, use the Expert Settings dialog box when you're creating your QuickTime movie from the iMovie project. As shown in Figure 12-5 (in the previous chapter), iMovie offers a checkbox called "Prepare for Internet Streaming." If you turn on this checkbox and choose Fast Start from the pop-up menu, iMovie automatically encodes some extra instructions into the resulting QuickTime file that permit your movie to do this "fast starting" when played back from your Web page.

13.3.1.2 Playing your movie

Once you've uploaded your iMovie, youand everyone else on the Internetcan watch it just by typing in the correct address. If your Web site's usual address is www.imovienut.com, and the name of your movie file is mymovie.mov, then the URL (address) for your new movie is www.imovienut.com/mymovie.mov. (If you placed it into a folder within your Web site listingcalled flicks, for examplethen the address is www.imovienut.com/flicks/mymovie.mov.)

Figure 13-5. The easiest way to put a movie on your Web page is simply to upload it there. Then create a link to it. When clicked, the link makes the movie pop up in its own, separate window. Your viewers can use the Play, Stop, and scroll controls as they see fit.

Tip: Mac and Windows computers consider capital and lowercase letters equivalent in Web addresses like these. The Unix machines that dish out Web pages by the millions, however, don't. Therefore, using only lowercase letters is a good precaution to avoid subjecting your visitors to "Web page not found" messages.

If one of your fans types this address into the Web browser or clicks a link that goes to this address, one of three things happens:

If your visitor's computer has the QuickTime plug-in software installed (almost all modern Macs do), a new little movie window opens automatically. (See Figure 13-5.) A few seconds later, it begins to play automatically.
If your visitor doesn't have this QuickTime plug-in installed, which is possible if she's using a Windows computer, a message appears onscreen. It offers three choices: Track down the necessary plug-in, download the QuickTime movie to the hard drive, or choose another program to play the movie.

Tip: To make it easier for your Windows friends to download the plug-in necessary to watch QuickTime movies, create a link on your Web page that says something like: "To watch this movie, please download the free QuickTime plug-in at http://www.apple.com/quicktime."
Some browsers have been configured to hand off all downloadable files whose names end with .mov to a helper application, such as QuickTime Player. In such cases, QuickTime Player now opens (independently from the browser), and the movie appears in its window.

UP TO SPEED
Getting a Web Site

If you want a Web site, you've got to get somebody to host it, somebody with a full-time , high-speed Internet connection who's willing to lend a few megs of hard drive space to hold your text, pictures, and movies. Fortunately, most Internet service providersincluding America Online and EarthLinkoffer a small amount of Web space at no charge. Check your ISP's Web page (or, on America Online, keyword: MyPlace ) for rudimentary instructions on creating a Web page and posting it online. (For more detailed instructions, consider reading a book on the topic.)

If your ISP doesn't offer Web hosting, or if you need more room for your movies, you'll find hundreds or thousands of Web hosting companies only too eager to sign you up as a client. A search at www.google.com should unearth as many hosting services as you'd ever need.

And one more thing. If you want to share a movie with only a small circle of admirers, and you have a high-speed connection like cable modem or DSL, you can turn your own Mac into a Web site, thanks to the Web Sharing feature built into Mac OS X. It's very convenient , because you don't have to upload your movies to anything.

See Mac OS X: The Missing Manual for step-by-step instructions.

13.3.1.3 Creating alternate versions

If your Web hosting service makes enough hard drive space available, consider creating an alternate version of your movie for viewers who don't have the QuickTime plug-in.

For example, the Windows equivalent of QuickTime is called the AVI format. Using QuickTime Player Pro, described in the next chapter, you can convert your movie into an AVI file, which you can post on your Web page exactly the same way you posted the QuickTime movie. Then you can put two different links on your Web page: "Click here for the QuickTime version (Mac users)," and "Click here for the AVI version (Windows users)."

Of course, your Windows visitors won't enjoy the quicker gratification of the Fast Start feature provided by QuickTime. But you'll save them the trouble of having to download and install a special plug-in. (Creating a very tiny movieno larger than 160 x 120 pixels, for exampleis especially important when saving in AVI format. Thanks to the lack of the Fast Start feature, Windows users who don't use the QuickTime plug-in must wait for the entire movie to download before they can begin watching it.)

13.3.1.4 The HTML code

If you'd like to make the presentation of your movie a little bit more elegant, you can use the sample HTML code listed here as a template. Even if you've never programmed in the HTML language, you can simply type these codes anywhere fine Web pages are writtenin Dreamweaver, BBEdit, or whatever program you use to make your Web pages.

In a pinch , you can type the following directly into TextEdit and then drag the resulting document into your Web space exactly as shown in Figure 13-4. (Of course, you should change the italicized text to match the actual address and name of your movie.)

 <HTML> <HEAD> <TITLE> Watch my iMovie here!</TITLE> </HEAD> <BODY> <P> Click <A HREF="http://www.myserver.com/foldername/mymovie.mov">here</A> to watch my iMovie!</P> <P>You'll need the free QuickTime plug-in to watch my movie in your browser. You can also download it to your hard disk and watch it with the free QuickTime Player.</P> <P>You can get the QuickTime plug-in and QuickTime Player for Mac and Windows at <A> HREF="http://www.apple.com/quicktime"> http://www.apple.com/quicktime</A>. </P> <P>Thanks for watching!</P </BODY> </HTML>

13.3.2. Embedding the Movie in Your Web Page

In the previous section, you read about how to create a link that makes your movie pop up in a separate window. But the really smooth operators on the Internet scoff at such an amateur hack. It's far more elegant to create a movie that plays in place, directly on your Web pageno pop-up window necessary.

Doing so requires yet further immersion in the HTML programming languagebut only up to your ankles. If you're not afraid, proceed:

13.3.2.1 The <embed> command

Creating this effect requires a few more lines of HTML code. One of them is the <embed> tag, which instructs your visitor's Web browser on how to handle media types it doesn't ordinarily know how to display (in this case, a QuickTime file). It can learn to understand QuickTime movies, however, either by relying on a helper application or a plug-in. Following the <embed> tag, you'll want to type in a variety of < embed > tag attributes, additional HTML commands that give the browser further instructions on formatting and displaying the file.

And that used to be all there was to it.

A couple of years ago, though, Microsoft pulled a switcheroo in the way it wrote its flagship Web browser, Internet Explorer. The result: millions of QuickTime movies on the Web didn't show up correctly in versions 5.5 or 6 of Internet Explorer for Windows. The following blob of code solves the problem. It embeds the movie on your page in such a way that the ugly "broken plug-in" icon will never appear, even for those long-suffering Windows users. (If they don't have a version of QuickTime that will work seamlessly, they'll see a message that offers to download and install the latest QuickTime software automatically, without having to close their browsers.)

  <OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" WIDTH="240"HEIGHT="196" CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab"> <PARAM name="SRC" VALUE="mymovie.mov"> <PARAM name="AUTOPLAY" VALUE="true"> <PARAM name="CONTROLLER" VALUE="false"> <EMBED SRC="mymovie.mov" WIDTH="240" HEIGHT="196" AUTOPLAY="true" CONTROLLER="false" PLUGINSPAGE="http://www. apple.com/quicktime/download/"> </EMBED> </OBJECT>

Here's what each line means:

< OBJECT CLASSID = The OBJECT element is a giant wrapper (you'll notice that the code blob ends with another OBJECT statement) that's designed to handle the broken Windows plug-in situation described above. Don't change this long, ugly string of numbers .
CODEBASE =. This line tells Windows browsers where to go to download the latest QuickTime software for Internet Explorer (called an ActiveX control) automatically, without making Internet Explorer quit and restart.
PARAM name =. The next three lines tell the browser how to play the movie using ActiveX controls instead of the QuickTime plug-in, just in case the plug-in is absent or doesn't work for that browser.
< EMBED SRC="mymovie.mov" >. This command instructs the browser to play the QuickTime file you've uploaded to your Web site, called, in this example, mymovie.mov. Upon reading this instruction, the visitor's browser will check its preferences file to see how she's configured it (using the Edit Preferences command) to handle this particular media type. If the QuickTime plug-in is installed, the browser will use it to play your movie. If not, the browser will check to see which helper application (if any) shes specified to display .mov files, and then attempt to open the file with it.

If no plug-in or designated helper program exists, the browser simply announces that it's unable to process the mymovie.mov file. The error message lets your visitor either manually choose a helper application on her hard drive, download the QuickTime plug-in, or download the QuickTime movie file to the hard disk.
< WIDTH=240 HEIGHT=196 >. These attributes tell the browser the dimensions of your moviein this case, 240 pixels wide and 196 pixels high. (If you decide not to make the QuickTime scroll bar appear, as described below, make the height 180 [the actual movie height]. The additional 16 pixels accommodate the scroll bar.)
< AUTOPLAY=true >. You can set this action to either true or false. When you write true, the movie begins to play automatically once the browser has received enough data from the server. (This feature works only when QuickTime 4 or later is installed on your visitor's computer, and when you've turned on the Fast Start option for the movie you saved.) If it's false, your visitor must click the Play button.
< CONTROLLER>=false. This true/false command specifies whether or not the QuickTime scroll bar (controller bar) appears at the bottom of the movie picture.

Tip: If <AUTOPLAY> is set to false, you should have <CONTROLLER> set to true. Otherwise, no one will be able to start your movie!
< LOOP=false >. The <loop> attribute tells the plug-in to play the movie once (false), over and over continuously (true), or forwards to the end, then backward to the beginning, then forward to the end, and so on ( palindrome ). In most cases, you'll want to set this one to false. (Besides, if you've decided to make the QuickTime controller scroll bar appear as described in the previous paragraphs, your viewers can replay the movie themselves by clicking the Play button, if they really think they missed something the first time.)
< PLUGINSPAGE="http://www.apple.com/quicktime/download" ;>. This handy attribute provides a hyperlink to the Web page where your visitors can download the necessary plug-in (in this case, QuickTime). It's by no means necessary to include this line of code, but it's a helpful thing to do, and can spare your viewers a lot of aggravation when they can't figure out why your movie doesn't show up on their screens.

13.3.2.2 More <embed> tag attributes

If you're kind of getting into this, here are a few more commands you can use to tweak the way your movie is presented:

< BGCOLOR >. If you specified <width> and <height> attributes that are larger than the dimensions of the movie itself, you can specify the color of the extra background space with this attribute. You can use either the name of the color (such as silver or blue ) or its hexadecimal value (such as #C0C0C0 or #0000FF ), if you know it.
< STARTTIME> and <ENDTIME>. Using these commands, you can specify exactly which section of your movie should play, so that you don't have to subject your viewers to the entire thing. You can choose the exact start and end points for the movie, down to 1/30th of a second. Do so in the minutes:seconds: frames format that you know from using iMovie, like this:
```
  <EMBED src="mymovie.mov" width="240" height="196" START-TIME=1:01:01 ENDTIME="2:15:07">  
```
If you don't include these commands, the movie plays from beginning to end.
< HIDDEN >. Use this attribute if you want the video part of the movie to be invisible, so that only the sound plays. You don't need to modify this command with any particular number or modifier. Just include the word in the HTML line, like this:
```
  <EMBED SRC="mymovie.mov" WIDTH="240" HEIGHT="196" HIDDEN>  
```
< HREF >. This attribute creates a link to another Web page that opens when your Web page visitor clicks the movie. The link can open another Web page, a picture, or even another movie, which, in turn, opens the door for the creation of elaborate, interactive, you-control-the-action-on-my-movie projects. The HTML might look like this:
```
  <EMBED SRC="mymovie.mov" WIDTH="240" HREF="http://www.myserver.com/foldername/anotherpage.html HEIGHT="196" HIDDEN>  
```
<TARGET=QUICKTIMEPLAYER >. This command makes the QuickTime plug-in launch the QuickTime Player program as a helper application, so that your movie will play within the QuickTime Player window instead of right there on your Web page. (If your movie opens in QuickTime Player, you give your viewers the option of enlarging the picture using the commands in the Movie menu, for example.)

This attribute works in conjunction with the <HREF> attribute, like this:

  <HREF="mymovie.mov" TARGET=QUICKTIMEPLAYER>

13.3.2.3 Making a poster movie

Using the <embed> tag in conjunction with the QuickTime plug-in is great, because it lets you embed a movie directly into your Web page. Trouble is, the data for your entire movie starts downloading to your visitors' Web browsers the instant they arrive at your page. (This downloading takes place even if you turned off the Autoplay option. It's true that the movie won't start playing instantly, but the data will nonetheless begin transferring, so that the movie will be ready to play when your visitor does click the Play button.)

This automatic downloading could annoy your visitors, both because it slows their Web browsers down substantially, and because some people have wireless connections where they're charged by the amount of data transferred. If your movie file is on the hefty side, or if you've got more than one movie on the Web page, this kind of unsolicited data-ramming could infuriate your visitors.

Figure 13-6. Using poster movies is crucial if you're embedding more than one movie in a single Web page. Otherwise, your audience has no way to choose which movie they want to see. As a bonus, the poster movie scheme preloads the QuickTime plug-in software (if it's installed), which shortens the wait your visitors will experience when they finally decide to play the movie.

You can solve this problem easily enough by creating a poster movie, a separate movie file that contains only one single picture (see Figure 13-6). Rather than embedding the actual movie in your Web page, you can embed this poster movie, turning it into a button that downloads the real movie file when clicked.

This arrangement gives your viewers the ability to look over the Web page before deciding whether or not to download the movie in its entirety.

To make a poster movie, you can use a still image from the original iMovie file. (See Chapter 9 for instructions on exporting a single frame from your movie as a JPEG file.) Actually, any old graphic image will do, such as a JPEG or GIF file, as long as it's the right size (see page 249).

Note: In the following steps, you'll turn this still picture into a one-frame movie. The explanation is technical, but juicy: By turning a tiny QuickTime movie (instead of a plain JPEG or GIF file) into a poster frame, you'll force your visitors' QuickTime movie-playing plug-in to become activated as soon as they arrive at your Web page. When they then click your poster frame, the actual movie will begin playing promptly, having already loaded the QuickTime plug-in.

Create a new iMovie document. Choose File Import, then navigate to the still image, and then double-click it.

The image appears on your Clips pane or Movie Track, depending on your iMovie Preferences setting.
Drag the graphic into your Movie Track, if it isn't already there. Set its timing to play for only one frame.

Instructions for specifying how long a still image should play in your movie are on page 246.
Choose File Share.

The Share dialog box appears.
Click the QuickTime icon. From the pop-up menu, choose Expert Settings. Then click Share.

Now the Save dialog box appears.
From the Expert pop-up menu, choose "Movie to QuickTime Movie." Then click Options.

The Movie Settings dialog box appears. (All of these dialog boxes and steps are described in greater depth in Chapter 12.)
Click Size. Specify a height and width to match that of the actual movie.

In other words, you want your poster frame to be exactly the same size as the movie itself.
Click OK. Click Settings.

Now the Compression Settings dialog box appears.
From the top pop-up menu, choose Photo-JPEG. Specify one frame per second; click OK.

In essence, you're creating a movie that's only one frame long. By specifying JPEG compression, you've ensured that this single frame will be as small (data-wise) as possible, for faster downloading.
Click OK again. Name the movie, and then click Save.

You might name the picture MoviePoster.mov, for example.

So far, so goodyou've got a poster movie frame on your hard drive.

Now you need to embed this new poster movie into your Web page. The process resembles the one where you embedded the movie into the Web page, but this time, you'll need a couple of additional commands:

  <EMBED SRC="movieposter.mov" WIDTH=240 HEIGHT=180 AUTOPLAY=TRUE CONTROLLER=FALSE LOOP=false HREF="mymovie.mov" TARGET="myself" PLUGINSPAGE="http://www.apple.com/quicktime/">

First, note that the <controller> attribute is set to false. Since the movie frame is just a single still picture, having a scroll bar underneath it would confuse the heck out of your visitorsand it wouldn't even work. Without the controller bar, the poster movie appears as a still image, as it should.

The attribute <HREF="mymovie.mov"> tells the browser that as soon as the visitor clicks the poster-movie image, the browser should load the mymovie.mov file.

POWER USERS' CLINIC
QuickTime Streaming Server

The Fast Start feature of QuickTime is a great feature. Without it, your movie wouldn't begin to play until its entire multimegabyte mass had been downloaded to your visitor's browser.

That's a good beginning. But in the professional world of Web video, the next step is QuickTime streaming. This relatively young technology lets many viewers simultaneously watch your movie in real time, live, as it's played from the host hard drivewithout waiting for anything to download.

QuickTime streaming makes possible live Webcasts, such as the occasional Steve Jobs keynote speech and other historic events.

Serving up QuickTime streaming isn't something that the average Mac can do. It requires a Power Mac equipped with special streaming QuickTime software, a full-time, highspeed Internet connection, and a copy of the Mac OS X Server operating system. Apple's QuickTime Streaming Web site has the details at www.apple.com/quicktime/servers.

<TARGET="myself "> specifies that the new movie should load directly in place of the poster movie. Because the poster frame and the movie have the same <height> and <width> attributes, the movie will seamlessly appear where the poster frame used to be.

Tip: As with any graphic on any Web page, you or your Web design software should remember to upload the newly created poster-frame graphic. You can use Captain FTP for this purpose, for example.