There's been a lot of hype lately around the HTML5 <video> tag, which is included in the HTML5 specification in order to add native support for embedding video content in web pages. The <video> tag and the rich scripting API for controlling playback make adding video to a web page almost as simple as adding an image. The browser itself provides the playback functionality without any need for plugins like Quicktime or Flash.

Problem is that among browser manufacturers no agreement could be reached on which codec to support for video rendering. Basically, there are two opposing camps: Apple and Google favor the patent-covered H.264 standard, while Mozilla and Opera favor the open-source and probably unpatented Ogg format. This led to a removal of the sections of the HTML5 draft specification that recommended a specific video codec.

Last week, two new events once again heated up the debate. On the one hand, Firefox 3.6 was released with HTML5 support, but only supporting the OGG video format. On the other hand, YouTube announced a beta of HTML5 support, which only provides content that is encoded using H.264. So the new Firefox release won't be able to play YouTube's embedded video's. At the moment, only Google’s Chrome and Apple’s Safari provide support for YouTube’s HTML5 video.

Workarounds

So what to do if you're planning to embed a video into a website using the HTML5 <video> element ?

First of all, you can overcome the lack of a default codec, by providing both formats in the same <video> tag.

<video controls>
 <source src="video.m4v" type="video/mp4" />
 <source src="video.ogg" type="video/ogg" />
</video>

For legacy browsers that don't support the <video> element, you can still provide fallback to QuickTime or Adobe Flash. A demo with sample code can be found on our HTML5 demo page.

The 'Video for Everybody' project

Video for Everybody is a chunk of HTML code that embeds a video into a website using the HTML5 element, which offers native playback in Firefox 3.6, Safari 3 & 4, Google Chrome and an increasing number of other browsers. If HTML5 is not available, the code falls back to a quicktime movie embed. If this is not available then flash is used. Finally if flash is not available, an image is displayed with a download link.

This approach leverages the benefits of HTML5 whilst maintaining backwards compatibility, all while providing support for a wide range of browsers and devices. You can find the full list here: http://camendesign.com/code/video_for_everybody/test.html.