Awe Dee Oh

May 31st, 2010

You may have noticed a lot of HTML5 vs. Flash talk lately. Substitute HTML5 for HTML5 video.

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).

It’s the same with audio. So, on Huffduffer, for example, I can wrap <audio> tags around the object element that embeds the Flash player:

But there’s a problem. Firefox understands the audio element but refuses to implement support for MP3 as long as it is patent-encumbered. Firefox users don’t get the fallback content (because the browser does support audio) but they don’t get the MP3 either. They get a broken icon.

So it’s safer to just use the Flash player, right? There’s a problem with that too. Mobile Safari doesn’t support Flash …but it does support the audio element. How can I serve up Flash to desktop browsers and HTML5 audio to the iPhone and iPad without going down the dark path of browser sniffing?