Crash course: HTML 5 video

So you want to add HTML 5 video to your site? Here's how.

1 2 3 4 Page 3
Page 3 of 4

So if you're planning on adding HTML 5 <VIDEO> support to your site, what's the best way to cut through this Gordian Knot of standards? Right now, the only viable long-term answer is to hedge your bets by doing the following:

1. Encode your video in at least two different formats, with Flash being one of them as a universal worst-case fallback.

2. Set up your <VIDEO> tags to degrade gracefully, so that browsers without support for a given tier of video will fall back to whatever else is available.

3. Test your site tirelessly -- not just with multiple browsers, but with multiple versions of individual browsers and on as many different platforms as you can: desktops, laptops, smartphones, etc.

Conversion tools

Assuming you've decided which codecs you will use to run videos in HTML 5, you then have to convert your video into that format. There are several tools available.

H.264 tools

Because H.264 is already a broadly used standard, odds are that whatever professional-grade program you have for creating video (such as Adobe Premiere or QuickTime Pro) will support exporting in that format. That said, there are also several open-source/free H.264 encoders available. For example, the ffdshow library, packaged for Windows as the "ffdshow tryouts" codec pack, or the stand-alone programs Handbrake and Avidemux.

Note that your use of any of these tools must conform to the licensing requirements for H.264. Using an open-source implementation of H.264 doesn't absolve you of this. Generally, if you're rehosting video through a provider who already has a licensing agreement (e.g., YouTube), or you're not creating video "where there is remuneration for the title distributed," you won't have to pay anything. But you still need to sign a license agreement with MPEG LA to use H.264 or host your content with a third-party provider that already has one.

Theora tools

In keeping with Theora's free-and-open promise, the tools for creating Theora videos are available free of charge across multiple platforms.

An interesting place to start is the Firefogg extension for Firefox, which lets you use Firefox 3.5 and up as a front end for a Theora video converter. Feed it a video file, set a few basic options, click Save, and the conversion takes place in the browser as you watch. Be warned that the program is picky about the file format you provide: The .mov files that came from my digital camera had to be converted into .avi before they could be used. Firefogg also trades convenience for power: It's easy to use, but you can convert only one file at a time.

A more powerful but less convenient tool is the ffmpeg2theora command-line encoder utility. It's more powerful in that it gives you complete control over the encoding parameters, less convenient in that you have to supply a whole slew of switches to the program to work it. Your best bet is to use a front end of some kind, such as Theora Converter, which allows you to batch-process files and see the most important options at a glance (but be warned -- it's still in alpha). The above-mentioned Handbrake also exports to Theora.

Finally, if you use programs that export through DirectShow filters, xiph.org has a DirectShow Theora filter in both 32- and 64-bit implementations.

WebM tools

Because WebM is still very new -- especially in its current no-license-fee incarnation -- the tool set isn't as polished as it is with Theora or H.264. The WebM project's Web site lists only a few basic tools, including a DirectShow filter for Windows and a stand-alone command-line encoder called makeWebm. It's important to realize that WebM is subject to further refinement and improvement, and therefore these tools are likely to undergo refinement as WebM itself is changed.

(Incidentally, the just-released beta 1 of Firefox 4.0 supports WebM playback. Try it out for yourself: Go to www.youtube.com/html5, click "Join the HTML5 Beta," and add "&webm=1" to any search to look for WebM-encoded videos.)

1 2 3 4 Page 3
Page 3 of 4
7 inconvenient truths about the hybrid work trend
Shop Tech Products at Amazon