Most web developers agree that the ability to play video on webpages is a must, however the jury is out on how these videos should be played. I’m of course referring to the HTML 5 video format controversy. Throw FlashPlayer into the mix and you’ll end up with a humongous fight leading fast to nowhere. Based on this, focusing on finding a solution, I tried to piece together a player using both HTML 5 video, and FlashPlayer for less capable browsers like Internet Explorer. You can find a demo alpha version of the player here: http://makingria.com/demo/html5/videoplayer/

Browser support

The player supports the following browsers:

• Internet Explorer 7 (FlashPlayer, H:264 video)
• Firefox 3.6 (Native playback, OGG Theora video)
• Google Chrome and Apple Safari (Native Playback, H.264 video)
• iPad and iPhone (Native Playback)
• Opera 10.5 (Native playback, OGG Theora video)

How to build it

My approach to building the player was based on my not so patented “falling down the stairs” method. In plain English this means that playback methods are ranked in a list, falling down the list as support for the wanted playback method is not found.  To accomplish this we utilize the HTML5 video tags ability to hold a list of different source videos. If no support for html5 video is found the video tag will be replaced by swfObject using the Modernizer JS framework.

The list looks as follows:

1. HTML5 video using the H.264 codec – high-res (WebKit browsers and iPad)
2. HTML5 video using the H.264 codec – med-res (iPhone)
3. HTML5 video using the OGG Theora codec (Firefox/Opera)
4. FlashPlayer video using the H.264 codec (Internet Explorer)
5. Error message (Others)

I wanted the player to support play/pause controls, zoom control and outputting the current time and the duration of the video no matter what video playback method being used. I accomplished this by using JavaScript to control all of these aspects of the video, even when using FlashPlayer as the video playback method. If you want to see how this was done in practice, go take a peek at the JavaScript. The code for the FlashPlayer based player can be found here.

Performance

CPU usage is a challenge when playing high resolution video. On my computer, a ThinkPad Intel Core 2 Duo 2.66 GHz with 4 GB RAM (Windows 7 64 Bit) I found that the combination of HTML 5 video playback in WebKit based browsers using the H.264 codec gave the best results when playing a 720p HD video. Also notice the smooth scaling when testing the video in WebKit based browsers.

When using the Gecko renderer in Firefox 3.6, the CPU usage almost doubled compared to the H.264 playback in the WebKit browsers. And it needs to be noted that this was a huge improvement from Firefox 3.5 where native video playback was pretty close to unusable due to a 60-80% CPU usage. This spike in CPU usage is probably caused by the OGG Theora decoder in Firefox and Opera.

In Internet Explorer you’ll end up watching a FlashPlayer rendered video as Microsoft has yet to release a browser supporting the HTML 5 video tag. What’s interesting is the fact that the FlashPlayer renders video content far more efficient (CPU vise) that the native video rendering in Firefox and Opera. WebKit’s native video implementation is slightly more efficient that the one of FlashPlayer, but not by much. It should also be noted that this test was done in FlashPlayer 10.0. Not the mythical speedmonster (rumored) which is FlashPlayer 10.1.