As alluded to in a previous post and technical details discussed more in depth on Club AJAX, BetterVideo has been working on an HTML5 Video Player and is pleased to announce a working prototype. And as promised, BetterVideo is staying on the cutting edge. By all indications, HTML5 video looks to be the de facto standard of how video will be displayed, perhaps as soon as within the next two years. Our player is being future-proofed for when that day comes, but even better, we’re ready for technology of today – namely the iPad.
The iPad doesn’t support Flash as most people know, and this leaves a glaring hole (or more specifically, a broken plugin image) on a very popular device for pages that rely heavily upon video-based content. Our code checks for WebKit, the rendering engine used by the iPad as well as the Safari and Chrome browsers, and if it is detected, we render HTML5 video tags and a custom, HTML user interface. The same interface allows for a seamless experience between The HTML5 and Flash players… not to mention different browsers.
There were many technical hurdles that had to be addressed, one of which was simply getting the darn thing to work on the iPad. But the main hurdle was the handling of fullscreen mode, which the specification does not allow for in custom interfaces. After doing some digging, we discovered the
webkitEnterFullScreen method which we implemented, only to discover it works on Mac Safari — but no where else. In fact, Chrome on Windows doesn’t have a fullscreen button even with it’s native controls. The solution was to use AJAX to change the player size to take up 100% of the browser screen.
The player is still in the prototype stage because it needs our business logic implemented. But currently it is a full-featured AJAXified HTML5 video player that “degrades gracefully” to our robust AS3 Flash video player.
You can see our player in action right now on the home page of BetterVideo. All you need to do is view it with a WebKit-based browser such as Safari or Chrome to see the HTML5 version and Firefox, IE or any other browser to see the Flash version.