Many modern web browsers have early support for the <video> and <audio> elements in the HTML5 spec. Unfortunately, their implementation varies depending on the ideals of the various browser developers. Safari expects video to be encoded in the high-quality H.264 codec, other browsers prefer Ogg Theora. Google is trying to push their own freely-licensed VP8 codec, which Mozilla is showing signs of adopting. Then there’s Internet Explorer, which doesn’t support the <video> element at all.
Thankfully, there’s a way to fairly easily support everything. You can offer HTML5 video in one or more formats and fall back on Silverlight or Flash if necessary.
MediaElement.js allows you to do that with a little bit of jQuery voodoo. After including all of the required files, you can serve-up an H.264 video for Safari and iPhone/iPad users like so:
<video src="myfile.mp4" type="video/mp4" width="640" height="360"></video>
<script>
jQuery(document).ready(function($) {
$('video').mediaelementplayer();
});
</script>
There is also a way to specify more than one video type in the <video> element, if you have re-encoded it into more than one codec:
<video width="640" height="360"> <source src="myfile.mp4" type="video/mp4" > <source src="myfile.ogg" type="video/ogg" > <source src="myfile.webm" type="video/webm" > </video>
You will want to check it out if you’re interested in cross-browser compatible web video.
