Tips & Tricks

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.

This may be ancient news to multimedia professionals, but we still need to inform customers about this on a regular basis. So, once and for all: Adobe Flash Player supports H.264 video and has been doing so since December 2007 (version 9, update 3).

Like Adobe, we recommend transcoding your files to mp4 video (H.264 video / AAC audio) instead of using Sorenson Spark (used by RATS for flv transcoding) or the On2VP6 codec. When transcoding with the same bitrate, the H.264 codec delivers much higher quality. You can test it yourself: go to the Control Panel 'Transcode your media' section and try transcoding the same source file to both mp4 and flv using the same quality settings. You will notice that the bitrate of the flv file will be much higher.

Version 9 (or higher) of the Flash Player plugin currently has a market penetration of almost 99%. If you still want to serve the remaining 1 %, consider transcoding to both mp4 and flv, and doing a client-side plugin version check that determines which format to offer.

Syndicate content