Cross browser HTML5 Audio and Video is a reality!

Well OK.. kind of … 🙂

I’ve been searching high and low for HTML5 implementations on video and audio. I wanted all my audio and video widgets to look the same cross browser. Although I knew HTML5 is getting great support, I also knew that HTML5 video and audio wasn’t supported by IE6, 7 and 8 and only partially supported by Opera and Firefox.. So the way to acheiving my goal looked pretty grim..

But alas! There are many clever implementations out there that are usable.. one in particular impressed me..

Existing HTML5 audio/video options

These are a few of the larger, more established players using a mix of Javascript, HTML5 and CSS for skinning along with a Flash degrade method:

These are all fantastic, open source players with a good community behind them.. But one that really stuck out for me was MediaElementJS.

MediaElementJS

This player has a slightly different approach.. Similar to other players, It uses Javascript to find and replace audio or video HTML5 elements with DIV elements that are styled to produce a nice graphic player of any sexy skin you like.. The real difference is the degrading..

Degrading

If the browser client doesn’t support audio or video tags .. MediaElementJS will revert to either Silverlight or Flash, but still inheriting the skin applied to the player! In other words, you only have to get your player to look as you like in a proper browser and any degrading will take care of itself..

The beauty is your player will look the same and display the same in every browser! Where as alternatives would just give you a flash player that you style yourself and could be difficult to get looking the same. Also the same HTML/CSS controls are displayed on HTML5 unsupported browsers as supported browsers!

The player also picks up HTML5 audio elements and replaces them with a nifty cross browser audio player.

Explore for yourself

Checkout MediaElementJS for yourself!

Conclusion

Anyways, I’m certainly not belittling the array of awesome audio/video players, because they all do a great job and are helping the push to a better web. I just wanted to point out and praise John Dyer as his implementation suited my needs just fine.