As I’ve been getting more and more into HTML5 and thereby also native video, I’ve come to realize that it’s a lot easier said than done. Of course, we all know about the need for multiple encodings in order to provide for the variety of browsers that proliferate the market. But even after encoding H.264, Ogg and WebM, we’re still left with the need to provide a fallback for our Internet Explorer 6, 7 and 8 users – which means using Flash.
There are several approaches to provide this fallback, but the “recommended” way to do this is as follows. We begin with the <video> element, and then a list of <source> elements providing the multiple encodings. Of course, you have to remember to list the MP4 file first, because iDevices are so damned arrogant that they won’t look further if they don’t see their desired format first. Not that Firefox is much better — if you don’t provide an ogg-encoded video, Firefox won’t fall back to the Flash video. Which, of course means you must encode your video in two formats (at least for now, as we wait to see the impact/support for WebM). Finally, you need the <object> element for Flash which loads and plays the H.264 video in a SWF wrapper.
<video height="270" width="340" controls> <source src="assets/video/odysseyAdv.mp4" type="video/mp4" /> <source src="assets/video/odysseyAdv.ogg" type="video/ogg"/> <object id="FlashID2" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="340" height="270"> <param name="movie" value="assets/video/videoPlayer.swf"> <!-- other parameters intentionally omitted --> </object> </video>
This got me to thinking… there’s got to be an easier way to deliver video to everyone – especially given that I don’t (currently) have any way to encode ogg or webm video from within Creative Suite 5. Since we are already encoding video into H.264 for consumption in Flash, couldn’t we just stop there? With the penetration of Flash at over 96% on desktop computers, Flash is the predominent video delivery vehicle on the desktop web. On mobile, Flash is already available both in the browser, as well as via AIR, on Android devices and will soon be available on other smartphone platforms like RIM, Palm, Nokia – so delivering via Flash is viable. So it’s only the iDevices that seem to be a problem – but the solution is so simple it’s almost laughable that we haven’t thought of it before.
For years we have “sniffed” for the presence of the proper Flash Player version on the desktop, and provided the opportunity to do an express install to update to the most current version. And for visitors without the Flash player, we’ve even provided alternate content such as the Flash Player badge and verbiage to suggest that the visitor install Flash. Hello, solution!
Instead of burying the Flash version of the video in the <video> element as a fallback for Internet Explorer 8 and below, we can provide Flash as the first option, and fall back to the native <video> element for iDevices.
<object id="FlashID2" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="340" height="270"> <param name="movie" value="assets/video/videoPlayer.swf"> <!-- other parameters intentionally omitted --> <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. --> <div> <h4>You must be on an iDevice, because you are seeing native HTML5 video — everyone else sees the video in the Flash Player!</h4> <video height="270" width="340" controls> <source src="assets/video/odysseyAdv.mp4" type="video/mp4" /> <source src="assets/video/odysseyAdv.ogg" type="video/ogg"/> </video> </div> </object>
You can see that I’ve simply put the <video> element in the place provided for alternate content. And, if you want, you can still provide all three video formats (mp4, ogg, webm) in case someone on Firefox has a Flash blocker turned on, for example. But if you only want to encode once as H.264, this solution is so simple, you’re probably kicking yourself as hard as I was when I “discovered” it.
Don’t believe me? Here’s an example that shows the native video with Flash fallback and there’s also a link to the Flash with native video fallback. And if you have any problems with these examples, definitely let me know!