Fallback from Flash to HTML5 video for iPad/iPhone Support

In a recent post, Jeremy Keith explains how the “HTML5 video vs. Flash” dichotomy is nonsensical:

Frankly, I’m a little baffled by this supposed dichotomy because you don’t have to choose. The way that video works, according to the spec, is for fallback content to be placed between the opening and closing video tags. So you can go ahead and use object or embed or whatever you need to put your Flash video in your markup. Browsers that understand the video element will use that while less capable browsers will play the Flash movie in the object element (and because of the way the object element works, you can put yet another layer of fallback content between the opening and closing object tags).

What this boils down to is: what are you trying to achieve?

If the answer is “cross-browser HTML5 video (with Flash fallback)”, then a solution along the lines of Kroc Camen’s Video for Everybody is perfectly suitable. By taking this approach, you are implicitly acknowledging that the Flash container is suboptimal for delivering video to the browser, and you will only engage it if necessary.

If the answer is “enabling existing Flash video to play on the iPad/iPhone”, then the above solution is overkill. By far, the most appropriate solution is to embed Flash video as usual (via object for most browsers, and embed for Firefox) and fall back to HTML5 video for Mobile Safari (iPad/iPhone/iPod Touch).

So, borrowing some conventions used by Jeremy in his write-up, here is an example of code that falls back from Flash to HTML5 video to a download link:

<object data="flashplayer.swf?video=file.flv" width="640" height="480">
    <param name="movie" value="flashplayer.swf?video=file.flv">
    <embed src="flashplayer.swf?video=file.flv" width="640" height="480" />
    
    <video controls src="file.mp4" poster="file.jpg" width="640" height="480">
        <p>Download video:<a href="file.mp4">MP4</a></p>
    </video>
</object>

If you want to see this example in action, please view the demo.

The cost of this implementation is converting the existing FLV to an MP4, hosting the MP4, and adding the HTML5 video code at the end of the object tag. If you’ve previously been serving up Flash video, the only changes are that

  1. visitors on Mobile Safari will now be able to play your videos, and
  2. visitors without Flash who are not on Mobile Safari will now be able to download your videos.


If you’re happy with delivering Flash video to your visitors but don’t want to exclude Mobile Safari visitors, this is an extremely robust solution that lets you take a step forward without mandating a leap of faith (in HTML5 video performance/patents/support).