Crash course: HTML 5 video

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

How to add HTML 5 to your site

The codecs you choose as your starting defaults should be dictated at least in part by what browsers are run by the majority of your visitors. Mark Pilgrim's Dive Into HTML 5 site has a detailed dissection of the competing and conflicting codecs, and it includes a handy chart that describes what current and next-generation browsers will support. Chrome is way out in the lead: The upcoming Chrome 6 will support all three major families of codec out of the box. As mentioned before, Firefox will support WebM in its upcoming Version 4.0, and it supports Theora, but not H.264, in Versions 3.5 and up. The most recent Internet Explorer 9 Platform Preview plays back H.264 natively; support for other codecs will most likely only be available as add-ons.

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.)

Using the VIDEO tag

Codecs aside, the most important thing about using video in HTML 5 is the construction of the <VIDEO> tag itself. In a perfect world, you'd just need to point to the video stream in question, like this:

VIDEO SRC="video.mov" />

But in our less-than-perfect world, the VIDEO tag sports a whole bevy of options that you choose from to ensure that your videos play back correctly across browsers and platforms. That said, most of this complexity exists for a good reason.

To illustrate this, here's an example of a VIDEO tag:

video width="640" height="480" controls>

source src="/video/video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"

source src="/video/video.ogv" type='video/ogg; codecs="theora, vorbis"

source src="/video/video.Webm" type='video/Webm; codecs="vp8, vorbis"

/video

The outer elements of the <VIDEO> tag have several options:

* WIDTH / HEIGHT: The width and height of the video, in pixels.

* CONTROLS: Add this option to show playback controls on the video.

* PRELOAD: Tells the browser to start downloading (but not playing) the video as soon as the page is loaded. Use PRELOAD="none" to explicitly tell the browser not to preload the video.

* AUTOPLAY: Include this to start playback of the video automatically.

The SOURCE subtag lets you specify which video file, or files, to play back. If you specify more than one file via multiple <SOURCE> tags, the browser will attempt to load each file in turn. In the above example, the .MP4 file (an H.264 stream) will be loaded first; if the browser can't play that one, the .OGV (Theora) stream is loaded next, and so on. There's no practical limit to the number of SOURCE; tags you can provide, but more than three is probably impractical.

The most complicated and problematic option for the <SOURCE> tag is the TYPE parameter, which describes to the browser the exact combination of codecs needed to play a particular video. This way the browser doesn't have to start downloading the video and perform its own codec detection on it (which may well be flawed) to figure out whether or not it can even play the video in question. If the browser knows in advance it can't play back a certain type of stream, it doesn't download it. You and the people viewing your videos will save a lot of bandwidth in exchange for a bit of hassle on your part.

For Theora and WebM codecs, the TYPE parameters are simple enough; the above examples encompass the most common scenarios. For H.264, though, the options become quite complicated because H.264 streams can be encoded in a number of profiles, and the TYPE descriptor has to match the profile used to encode the file. If you're using only one profile for all your videos, you can create the profile string once and forget about it; if not, you'll need to find some way to ensure the right TYPE string is associated with the file in question (e.g., via metadata in a content management system).

One other extremely important thing that many webmasters overlook is the MIME type for the files. Firefox, for instance, is extremely dependent on MIME types for determining what to do with a given file. To that end, use the following MIME types when configuring your Web server: Next: MIME Types

Tags html5Internet-based applications and servicesinternetvideo

More about Adobe SystemsAppleCNET NetworksForge GroupFree Software FoundationGoogleMacsMicrosoftMozillaMozilla FoundationMPEG-LANetflixNUOn2 TechnologiesOpera SoftwareRealNetworksW3CWikipediaWorld Wide Web Consortium

Comments

Comments are now closed

You'll pay a lot more for an unlocked Nexus 6 smartphone

READ THIS ARTICLE
DO NOT SHOW THIS BOX AGAIN [ x ]