I must say results were disappointing and showed far too much difference than what’s acceptable. It may have something to do with this specific font, like the font-hinting.

It’s sad to see that Opera is not supported at all, even though the latest versions have native support for font embedding.

All the tests were done on a Windows 7 PC.

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.

Since the release of the iPhone Adobe have tried to get Apple to release a Flash player version for the iPhone, but without any luck. The situation has not changed when it comes to the iPad. The big difference here is that one of the major things to use iPad to is surfing the web. We have been used to limitations when surfing the web on mobile devices. But I must admit that I don’t expect any of these limitations when it comes to a “mini-computer” like the iPad.

Connecting to millions of sites out there, some major like Disney, ESPN, Farmville, YouTube, through the iPad will not give a very good experience. All the sites that use Flash to enhance the user experience, all the games and videos and much more will be stopped by the iPad. Fallback solutions will be presented and damages the ultimate user experience for many sites. For me this is a big deal and a reason alone to not buy the iPad. Not because I’m a Flash developer. I’m still in love with my iPhone and I love gadgets, but there is a limit for what limitations I am willing to accept. The Flash limitations are demonstrated on the theFlashBlog

Just a couple of days after the iPad news were released MSI showed a prototype of a similar tablet-pc that is based on the Android platform. The fuzz wasn’t as big as around the iPad, but I still think this is exciting news. One thing is sure and that is that Apple needs competition. Android is challenging the iPhone on mobile devices and maybe we will see the same war on the tablet-pc area.

Anyway, whatever the iPad will turn out to be, I would like to thank Apple for what they do when it comes to developing user-friendly innovating technology. Somebody needs to show the way and as long as the crowd follows we will continue to have progress. I do look forward to sit with an iPad in my hands and try it out. I’m a bit skeptic but it’s always possible to convince me.