“The Garden” playback in HTML5 with a Flash fallback

I’m sure that you’ve heard something about HTML5 by now whether it be through YouTube’s beta program or the whole “war” between Apple and Adobe (and the whole idea of the demise of Flash). There’s a whole lot to it, but the real thing that catches my eye is the new way video is being implemented since you no longer need the dependency on Flash technology (which I think is good, but why rely on a plugin of some sort to display any kind of web content).

For video, HTML5 takes away from the dependency on video plugins since all video decoding software would be built into the browser. However, being that this is a developing standard, the way it’s being used and incorporated into the newest browsers – Firefox, Safari, Chrome, and Internet Explorer – can vary. For example, the biggest drawback at the moment is that Firefox (Mozilla) to be exact is supporting their HTML5 video by using the OGG video format. Safari (Apple) and Microsoft’s Internet Explorer 9 is supporting the H.264 format while Google is being the cool one and supporting both. I personally like H.264 best because I find it to have higher quality over OGG video. The argument Mozilla presents is that H.264 is not an open source format so they don’t want to go against their philosophy and company culture of being open source. The big fear is that the patent holders would later charge for having to use the h.264 format so in reality, I do understand their viewpoints.

But in the mean time, if anybody wants to use HTMl5 video, they would need to do a good amount of work to get things done. First, they’d need to make an h.264 version to support Explorer 9 and Safari browsers while making an OGG video format to support Firefox. Producing an H.264 file can be quite easy through QuickTime or other free solutions like Handbrake. To produce an OGG video, there are much more limited (good) software to help the end-user. For me, my best option has been the Miro Video Encoder. And on top of that, you should also produce some sort of flash file to support the older browsers which does not support HTML5 video standards. The good side of this is that you can get an SWF file to read a H.264 video so there isn’t really a necessity to produce a third FLV format for the Flash video.

All of this does seem like a lot of work, but luckily there’s a new HTML5 video library out there which makes things easy called Projekktor. This project by Sascha Kluger is an open source software which makes HTML5 video easy to use today by making the video simple and universal to use. Through JavaScript (via jQuery), Projekktor allows for a custom player look on your site while managing HTML5 video capabilities with a flash fallback for older browsers not capable of HTML5. The nice thing is that it’s very easy to install and manage since all that you need to make this function properly is jQuery, the projekktor javascript, and the css theming file to make things work. Once on your server and properly coded on your html document, you’re all set to use the <video> tag by simply applying class=”projekktor” to it.

On my site, I use video in my video portfolio, so by combining the code with in a php script and MySQL database, I can easily manage and create my various HTML5 video pages which is nice.

I suggest you take a look at Projekktor‘s site and discover ways as to how you can implement it on your own site to help push it to be compliant to a wider array of devices such as Apple’s own iPad, iPhone, and iPod touch product line.

For additional samples of HTML5 video functions, visit my Video Editing Portfolio.