Simple Cross-Browser HTML5 video with a single H.264 file and fallback options

At first glance, the promise of HTML5 <video> seems awesome. Just a simple

<video src="myvideo.mp4" controls></video>

and you’re done right? Not quite. In reality there are all kinds of browser inconsistence that make this impossible. Here’s a run down of the problems:
1. Older browsers don’t support <video>
Only the most recent versions of the big five (Firefox, Chrome, Safari, IE, Opera) support <video>, so you have to have a fallback solution of some kind if you want to use <video> and still support your audience.
2. Newer browsers don’t support the same codecs
Sadly, different browsers support different codecs. H.264 works in Chrome, Safari, and IE9, while Firefox and Opera only support Ogg/Vorbis. All the major browser vendors have pledged support for Google’s recently released WebM format, but this will take some time for the browers and encoding software to catch up.
3. Fallback HTML requires multiple video files
The most common solution offered is to use nested HTML to allow browsers that don’t support <video> to fallback to flash. One of the best of these is called Video for Everybody and looks something like this:

<video>   <source src="myfile.mp4">   <source src="myfile.ogg">   <object src="flashplayer.swf?file=myfile.mp4">      <embed src="flashplayer.swf?file=myfile.mp4">   </object></video>

This works in all browsers, but it has a major problem: You must have two video files. If you attempt to use only MP4, Firefox on Opera will fail. If you remove the <source src=”myfile.ogg”>, Firefox and Opera will not fallback to the Flash <object>. They will just display a big, blank, black box with an X. The same goes if you only use OGG on browsers that don’t support OGG, or attempt to use WebM.
The HTML fallback mechanism only works if the browser doesn’t understand the <video> tag. It doesn’t work if it doesn’t understand the <source> file. So if you want to only use one file, then you must use JavaScript.
A Simple JavaScript Solution
Since I don’t want to maintain two versions of every video, I need a way to fallback to Flash for non-H.264 browsers. Here’s my simple solution using jQuery.

<video id="my-video">
   <source src="myfile.mp4" type="video/mp4">
</video>
<script>
(function() {
  var video = document.createElement("video");
  if ( typeof(video.canPlayType) == 'undefined' || // detect browsers with no <video> support
       video.canPlayType('video/mp4') == '') { // detect the ability to play H.264/MP4
       var video = $('#my-video');
       var videoUrl = video.find('source').attr('src');
       var flashUrl = '/flash/myplayer.swf';
       // create flash
       var flash = '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" ' +
				'	codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" ' +
				'	width="' + video.width() + '" height="' + video.height() + '" id="fallbackplayer">' +
				'		<param name="allowfullscreen" value="true" /> ' +
				'		<param name="movie" value="' + flashUrl + '?mediaUrl=' + videoUrl + '" /> ' +
				'		<embed id="dtsplayer" width="' + video.width() + '" height="' + video.height() + '" allowfullscreen="true" allowscriptaccess="always" ' +
				'			quality="high" name="fallbackplayer" ' +				'			src="' + flashUrl + '?mediaUrl=' + videoUrl + '" ' +
				'			type="application/x-shockwave-flash" /> ' +
				'</object>';
        // insert flash and remove video
        video.before(flash);
        video.detach();
  }
})();
</script>

The code is fairly simple. It just checks if the browser understands the <video> tag by checking for the “canPlayType” function, then it uses canPlayType to determine if the browser can play an H.264/MP4. If not, it inserts Flash as a fallback.
Please note: This is a simplified script for example purposes only. It needs flash version detection, and it should be turned into a jQuery extension, but it should still be a nice guide for