13.3. Posting a Movie on Your Own Web SiteIn some cases, you might prefer the control and the freedom of putting movies onto your own Web page, designed the way you like it. If you already have a Web site, you can export a QuickTime version of your flick and upload it to your Web site, whether that's a .Mac account or any other Web-hosting service. (Most Internet accounts, including those provided by AOL and Earthlink, come with free space for Web pages uploaded in this way.) This is the most labor- intensive route, but it offers much more flexibility if you know how to work with HTML to create more sophisticated pages. It's also the route you should take if you hope to incorporate the resulting movie into an existing Web site (that is, one in which the movies aren't the only attraction). You'll quickly discover that this process is more technical than the .Mac methods . For starters, the following discussion assumes that you already have a Web site. Figure 13-5. Here's where you edit your movie page before unleashing it on the Web. Here's where you can add or edit a title and a description. |
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. |
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.)
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 save it as a plaintext document, which you upload to your site using an FTP program like Fetch. (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>
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 page, as shown in Figure 13-7no 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:
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 was that 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.
<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.
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>
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.)
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, high-speed 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. |
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.
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 Section 9.2).
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 in Section 8.11.
Choose Share QuickTime .
The Share dialog box appears.
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. <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.