Video on the Web

Tutorial: Video on the Web


video web Once you’ve finished editing your video (or audio), you’ll need to greatly reduce its filesize so that it can be transferred over the Web effectively. Compressing audio and video can be as much an art as a science, but we’ve attempted to simplify the process here. You’ll need to make some choices about what dimensions you need your video to be to work with your page design, as well as how much to compress it to retain maximum quality while addressing the bandwidth needs of your users.

Making choices

You’ll need to make two major decisions about how to present your audio and / or video on the web: Format: Do you want to present your media in Real, QuickTime, or Windows Media format? Each format has its own strengths and weaknesses. We use QuickTime at the J-School because of its high quality, wide compatibility, and low cost (free). Because all Macs support QuickTime creation and playback natively, and because iMovie and Final Cut Pro generate QuickTime by default, QuickTime is an especially convenient choice if most of your media is generated on Macintosh computers, as it is in many media production environments. The choice of format you use for a given project will probably be determined by the publication you’re working for. Be sure to find out in what format media is expected before you enter the final phases of production. Compression Methods: Once you’ve chosen a format, you’ll need to decide how much to compress your audio or video. The more you compress, the smaller the file sizes will be and the easier it will be for modem users to access your media over a slow connection. However, more compression means throwing away more data (bits). Therefore, high compression means low fidelity and vice versa. Ideally, plan to deliver two files: A high-quality, high-bandwidth version for cable/DSL users and a low-quality, low-bandwidth version for modem users, although this is not always possible. Again, this decision will likely be determined by the publication you’re working for. It is even possible that they’ll want to receive the edited but uncompressed (raw) media files from you so they can compress it themselves. Deciding exactly what parameters to use when exporting compressed audio and video is as much an art as a science, and depends on many factors. Both iMovie and Final Cut Pro come with “default” export options, which let you use a canned “set” of export parameters for high, low, and medium bandwidth users. Both programs also let you override the defaults to choose codecs, dimensions, bitrates, and framerates manually. The examples shown in this tutorial demonstrate the export options the J-School has decided on, but are by no means to be taken as gospel — we recommend that you experiment with export options and perform your own filesize vs. quality comparisons.

Exporting Your Movie Sequence

You can generate QuickTime audio and video files from iMovie, Final Cut Pro, or the QuickTime Player itself. You can export video to play as a movie on a Web site, or as video to embed in a Flash project. While you get to the export to QuickTime panel in slightly different ways depending on which application you’re in, all offer the exact same output options. If you’re using iMovie, select: File … Share … QuickTime … Expert Settings … Share The initial iMovie export screen should look like this: iMovie Share If you’re using Final Cut Pro, select: File … Export … Using QuickTime Conversion (Note that it’s important in Final Cut not to select the export option labeled simply “QuickTime.” Doing so will cause an uncompressed QuickTime to be exported — far too large to be used online). You’ll get a Save dialog box, and from here on options for iMovie and Final Cut are identical. Choose a location for your movie, probably on your scratch disk (such as a portable firewire drive), and specify a filename for the exported movie file. At this point, you have three options:
  • Export with one of the prefab export parameter sets (easiest)
  • Start with prefab parameters but modify them as needed
  • Start from scratch and set all parameters by hand (hardest)
If time is of the essence, or if you want to avoid seeing and tweaking a lot of options and settings, just stick with the first option and follow the steps in the Modify Default Export Settings below.

Option #1: Simple Video Export

For easy export using the preset parameters, in the Save dialog box set the Format to QuickTime Movie, and Use to Broadband – Medium. Simple Export Click Save and you’ll get a movie at the dimensions (320 x 240 pixels), resolution, and compression options currently recommended by Apple. Note: Here at the Knight Digital Media Center and Graduate School of Journalism, we no longer use the default dimensions of 320×240. With greater broadband penetration in the real world, we’ve opted for a higher resolution of 400×300 for live webcasts and 480×360 for archived webcasts. In addition, we have increased the framerate to 29.97fps for additional clarity. Amazingly, the very efficient h.264 codec allows us to do this without swelling the resulting filesize to unacceptable proportions. If you prefer to create a higher resolution archive file such as this, here is a screenshot showing all of the settings we’re using to achieve the quality seen here. To switch to one of these dimensions, simply substitute them in any instructions below that refer to 320×240. archive settings Consider using these enhanced settings for additional quality, with the understanding that your resulting files will be larger and therefore harder to download via slow connections. That’s it! You can skip the rest of this tutorial. If you want to dig deeper into the myriad compression options in QuickTime, read on.

Exporting Video for a Flash Project

If you are planning to use your video inside a Flash project, there’s no need to choose any video or audio compression at all. You don’t need to worry about file size, since the video and audio will be compressed by the Flash authoring tool when you do your final export from Flash. So you shouldn’t compress the video or audio at this stage when creating the QuickTime movie. For exporting a movie to Flash, follow the instructions above and in the Save dialog box set the Format to QuickTime Movie, and Use to Broadband – Medium. Then click on the Options button and you’ll get a Movie Settings dialog box, where you can de-select the default compression settings for video and audio. In the area for Video at the top, click on the Settings button. At the new screen at the top, click on the Compression Type picklist and choose None in the list. Click OK to return to the Movie Settings dialog box. Now in the area in the middle for Sound, click on the Settings button. At the new screen at the top, click on the Compressor picklist and choose Linear PCM in the list. Click OK to return to the Movie Settings dialog box. Finally, click on OK to preserve the settings and then Save to export the QuickTime movie. You now can embed the video in Flash.

Option #2: Modify Default Export Settings

Rather than start from scratch with compression options, you can start with one of the prefab sets and change a few settings to gain better compatibility with older versions of QuickTime Player or to conserve a little more file size / bandwidth. QT Export To do this, follow the instructions above and in the Save dialog box set the Format to QuickTime Movie, and Use to Broadband – Medium.

Choosing a Codec

At this point, you need to be a bit careful. When Apple releases a new version of QuickTime, they usually include the latest, greatest “codec” – compressor/decompressor algorithm (the latest codec is always the default export option). The latest codec will almost always give you better quality at smaller file sizes. But to use it, you need to make sure your users also have the latest version of QuickTime installed. With QuickTime 7, for example, Apple introduced the h.264 codec, which gives stunning quality at small file sizes But users of QuickTime 6 and below cannot view files generated with h.264. If you want your video to be viewable by the outside world, you’ll probably want to choose a more widely installed codec, such as MPEG-4 for QuickTime 6 users, or Sorenson for users with even older versions of QuickTime installed. The instructions below cover both QuickTime 7 (h.264) and QuickTime 6 (MPEG-4).

Exporting With h.264 and AAC for QuickTime 7 Players

With this setting, you’ll get a QuickTime file exported with the h.264 video codec and the AAC audio codec, with dimensions of 320 x 240 pixels at 15 frames per second (fps). First we’re going to reduce the quality of the video track a bit. Click the Options button. Then, in the Video section, click the Settings button. Change the Data Rate from Restrict to Automatic. Drag the quality slider from High to Low. Note: Leaving the quality at High rather than Low will nearly_ double _the file size of the exported video, without doubling the quality. Yes, the difference in quality is noticeable, but you’ll probably find this an acceptable compromise. You might want to experiment by exporting your video multiple times at various qualities to see how the quality and file sizes compare as you change various options. h.264 video settings You’ll achieve great file-size savings by changing the Quality slider from High to Low. This slider is not enabled until you change the Data Rate option from “Restrict” to “Automatic.” Click OK to save the Video panel settings. Now make sure the video output will be at the correct dimensions. Click the Size button and make sure the output size to set to 320 x 240. Next we’ll check on the Sound settings. Because we’re using the automatic data rate and quality slider, there aren’t many options available in the Sound settings panel. You might want to verify that yours looks like this: h.264 audio settings The Compressor picklist should say AAC, which is the audio format most used with h.264 video. Other audio codecs can be selected from this list if desired. For AAC, because of the way this codec works you actually won’t reduce file size by changing the audio from stereo to mono. So leave it at Stereo. Click OK. Finally, in the Prepare for Internet Streaming checkbox, set Fast Start. Only use the “Hinted” option if your movie is going to be placed on a genuine QuickTime Streaming Server, rather than a standard Web server. When all settings have been made, the Movie Settings panel will summarize your selections as text entries on the right. Depending on the options chosen, your export panel will look something like this: h.264 all settings Want to generate an audio-only or video-only movie? Just uncheck the appropriate checkbox on this screen to disable that track altogether. Finally, click on the OK button to save the settings and then Save to begin exporting the QuickTime movie. This could take a while, depending on the length and complexity (transitions, titles, etc.) of your video clips. Remember, Final Cut and QuickTime need to examine every single frame of your video and perform many math-intensive calculations on each one. This is one of the most CPU-intensive things you can possibly do with your computer! When the export is complete, you’ll have a QuickTime movie file that you can move onto any standard Web server. The final file size should be between 3 and 4 MBs per minute of video. If your output is larger than that, you’ve probably done something wrong — go back and try again, checking each setting carefully. Note that these are only guidelines and recommendations — feel free to experiment with output options until you find the combination of file size and quality you’re looking for. Try raising or lowering the frames-per-second and quality level settings for dramatic differences. To learn how to embed your video in a web site, see the tutorial on Adding Multimedia to Web Pages. Note: if you’re exporting video to use in a Flash project, see the section on exporting for Flash above.

About this Tutorial

This tutorial is based on lectures given by Scot Hacker in multimedia skills classes at the UC Berkeley Graduate School of Journalism.

Republishing Policy

This content may not be republished in print or digital form without express written permission from Berkeley Advanced Media Institute. Please see our Content Redistribution Policy at