HTML5 in the browser: Canvas, video, audio, and graphics
Where Chrome, Firefox, IE, Opera, and Safari stand on HTML5 Canvas, HTML5 video, SVG, and WebGLFollow @peterwayner
<video> tag looks perfectly innocuous, like an
<img> tag where the pictures move. Anyone can add a video to a page by inserting the
<video> tag, uploading the file to the Web server, and putting the right path in the source attribute for the tag. Voilà.
If only progress were that easy. While the format for the tag is always the same, the format for the file varies dramatically. This might not matter if the browsers all supported the same collection of formats as they do with the GIF, PNG, and JPG files used to hold still images. But they don't. Everyone has their own idea of which video formats belong and support can change from revision to revision of the browsers.
The most common formats are the Ogg Theora, developed by an open source group, Xiph.org; H.264, built by the MPEG group; and VP8, created by On2, a company recently purchased by Google. There are others, but they don't have as much support. Apple's Safari browser, for instance, displays anything that can be decoded by QuickTime.
All three of the main formats offer pretty comparable results, although video specialists can often find artifacts to argue about. The biggest point of contention is the cost of satisfying anyone who might hold a patent. The H.264 format was one of the most commonly used formats in the past, but it requires payment for patent licenses from the MPEG LA group. As an advantage, there are a number of chips that can speed up reconstructing the pixels from the compressed MPEG file. These can lower the battery consumption of handheld devices like the iPhone.
The On2 patents are now available for use royalty-free, which makes them more desirable for everyone. At this time, no one is publicly discussing patents that might govern the Ogg Theora format, but there are worries that the patents filed long ago may emerge some time in the future, giving the patent holder the right to sue everyone who's been using the format since then.
The patent questions may not be too important for small website designers and filmmakers because many tools come from companies that pay the licensing fees for encoding and decoding the H.264 stream. That license may not be enough for bigger fish, however, because the MPEG LA group also wants fees for broadcasting the video to big audiences. If you reach certain thresholds, you may need to buy this license or you may not. One MPEG LA press release [PDF] promises not to charge patent royalties on rebroadcast before 2015. After that? It's all a bit complicated. The lawyers won't be cut out of the loop for some time.
Is there a solution? Not an easy one. While everyone continues to experiment with all of the features, the best solution is probably to encode the video in multiple formats, then use a script to detect the browser.
<video>support in current Web browsers
|Apple Safari 5.0||Yes|
|Google Chrome 8.0||Yes|
|Microsoft IE 8.0 / 9.0||No / Yes|
|Mozilla Firefox 3.6||Yes|
A more entertaining way of testing HTML5 video in your browser is found in this table filled with flying InfoWorld logos. If you can see the logo, your browser supports the format.
The audio tag is similar to the video tag, largely because it's just a subset. The
<video> tag produces both sound and images, and the audio tag produces only the sound. In most cases, the audio tracks are a subset of the video format. The popular MP3 format for music and sound is a subset of the MPEG standard for encoding video.
For now, it seems as if the audio support will largely mirror the video support. If Firefox is pushing Ogg Theora video, then it also supports the Ogg Vorbis audio format because Ogg Vorbis is used for the audio portion of Ogg Theora. If some browser supports WebM for video, it will undoubtedly support WebM for audio. The one inconsistency may be the MP3 format, which is technically part of the general MPEG-4 video format but is now so common that browsers will support it independently. My latest version of Google Chrome, version 7, supports MP3 but not MPEG-4.
|H.264/MPEG-4||Ogg Theora / Ogg Vorbis||VP8|
|Apple Safari 5.0||Yes||No||No|
|Google Chrome 8.0||Yes||Yes||Yes|
|Microsoft IE 8.0 / 9.0||No / Yes||No / No||No / No|
|Mozilla Firefox 3.6 / 4.0||No / No||Yes / Yes||No / Yes|