Recently I’ve been spending some time implementing HTML5 video for the new video channel at work. One of the main requirements was to enable the playback of all videos across the site using the HTML5 video container. The video container allows web developers to insert code into a webpage that will play video natively in the browser, without the need for extra plugins such as flash. This sounds great, apart from when you look at the formats needed to ensure videos will playback across all browsers, using the HTML5 video container where it is supported.
The HTML5 specification shows how videos should be included in a HTML page, however it doesn’t specify the container that should be used to display videos. Unfortunately for developers and content creators the makers of the most popular browsers can’t agree on a standard format either. Apple, the makers of Safari have decided that the H.264 is the way to go, and Microsoft seem to agree, with Internet Explorer 9 only supporting this format.
Mozilla and Opera have opted to throw their weight behind the Ogg Theora video container mainly due to the cost of licensing the H.264 codec and in the spirit of all things open source.
Until recently, Google Chrome had fixed on the H.264 container however they decided to remove support for this codec in future versions of Chrome and will instead back their own horse, WebM. WebM has the backing of Mozilla, and they have indicated that they will add WebM support to the upcoming Firefox 4. In my opinion, this probably kills Ogg Theora as a online video container.
Until all browsers support HTML5 video and the majority of people online are using these new browsers, there will be a need to include a fallback option and most people are reverting to flash in the case where the browser can’t play the videos using the formats supplied.
All of this means that content creators must create multiple versions of their video content if they wish to move to HTML5 video. The big push for content creators to support HTML5 video is coming from Apple. Their iDevices, the iPad and iPhone, won’t play flash video (which is probably the leading way of showing video content online at the moment) leading to sites to move to HTML5 video. There are many gotcha’s in moving to HTML5 video, not least that all content must be encoding twice, once in H.264 (IE, Chrome now, Safari, iPad, iPhone) and then in another format that allows it to be played on other browsers (Firefox, future Chrome releases, Opera). And then of course, you still need to have a flash fallback player for older browsers. So what would I go for? – Well probably H.264 and WebM in the long run but realistically you’re going to need Ogg Theora as well for the time being.
This leads to some very hairy HTML code, and rather than go into it here, I’ll just point you over to Video for Everybody, which has some excellent examples of how to include HTML5 video in your own pages. It also has solutions to most of the common problems when including HTML5 video.