As you’ve probably read somewhere on the interwebs, HTML5 is bringing native video support to browsers. This will enable us to embed a video file directly in our HTML, much like a SWF or image.
You may have also heard that there’s currently a big controversy over what kind of video files will be supported. The defacto standard is MP4/H.264, which is used by Adobe in their Flash video format, and by huge media sites like YouTube. Mozilla, the makers of Firefox, refuse to support the MP4/H.264 standard because it isn’t open-source and free from licensing constraints.
Turns out H.264 is not public domain. Although the company that owns the H.264 patent has temporarily agreed to waive royalty fees for the next decade or so, they reserve the right to charge fees later on. Mozilla says no way, we will only support a video format that is free from licensing issues and has no patent holders (because patent holders can decide to sue some day). Mozilla supports the completely free/open-source Ogg format.
Apple and Adobe, already knee-deep in MP4/H.264 with their Quicktime and Flash video products, vow to press on with H.264. Google also supports H.264 because YouTube relies on it, and because Google’s new Chrome browser is based on the WebKit project, which has Apple as a main code contributor. In case you haven’t noticed, Apple, Adobe and Google have pretty much cornered the internet video market the past few years, so if they’re throwing their support behind H.264, you can count on it being around for a while. Not to mention that many mobile devices, including the iPhone and most Android phones, have hardware that is designed specifically to support H.264 video, enabling smoother playback and less battery drain than non-dedicated hardware.
(For what it’s worth, Opera is in agreement with Mozilla and supports Ogg. However, not many people seem to pay attention to Opera these days, so they don’t appear to have much influence in this race. Microsoft has endorsed H.264 with it’s upcoming IE9 browser, but it won’t be available for some time.)
Firefox and Opera are essentially forcing websites to offer two versions of each video: an Ogg version and an MP4 version. In my opinion — and the opinion of many others — this simply will not do. Providing two different video files is not realistic, Ogg’s quality is inferior to H.264, and many computers and mobile devices have direct hardware support for H.264 but not Ogg. In reality, without MP4 support, HTML5 video is rendered useless for most site developers in Firefox and Opera.
The most logical workaround is to code
<video> elements to work for MP4 and have a Flash Player-based fallback for older browsers and browsers that only support Ogg. Since the
<video> element is designed to allow for fallback content, just like the
<object> element, we can do this:
<video id="myvideo" width="480" height="360" controls> <source src="/video/file.m4v" type="video/mp4"></source> <object data="flash-video-player.swf" type="application/x-shockwave-flash" width="480" height="360"> <param value="flash-video-player.swf" name="movie"/> <param value="file=/video/file.m4v" name="flashvars"/> </object> </video>Code language: HTML, XML (xml)
This works fine in Safari, Chrome, Internet Explorer and older versions of Firefox and Opera that don’t support the
<video> element. However, Firefox 3.6 and Opera 10.5 do something very irritating: even though they KNOW their
<video> doesn’t support “video/MP4”, they load the
<video> element anyway. Which is … like … OMG so duh … because the video can’t possibly play!
<video> element is loaded, Firefox and Opera will never load the fallback
<object> containing the Flash-based fallback.
<video> element in Firefox and Opera.
Here’s a simple script that will detect whether HTML 5 video is supported, and if it is, will check to see if MP4 is supported. If HTML5 video is supported but MP4 is NOT supported, the script deletes the specified
<video> element but leaves the Flash fallback in its place.
A few notes
Tested successfully in:
- Windows XP: Firefox 3.0, Firefox 3.5.8, Internet Explorer 6, Internet Explorer 8, Google Chrome 4.1.2
- Windows Vista: Internet Explorer 7
- Mac OS X (10.6): Firefox 3.6, Safari 4.01, Chrome 5 (beta), Opera 10.1, Opera 10.5b
(Note: IE6, IE7 & IE8 give an unexplained “object required” error in the demo page, but everything works fine. I will investigate as time permits.)
This demo uses the JW Media Player as the Flash fallback video player, but you can use any Flash-based video player on your page.
This demo doesn’t do any Flash Player version detection to ensure the visitor has a supported version of Flash Player. If you need to add Flash Player version detection, you can use SWFObject to embed your Flash file.
Update April 3, 2010: This post was updated to add Opera 10.5 to the list of non-behaving browsers and remove Firefox user agent sniffing.