You may have noticed a lot of
HTML5 vs. Flash talk lately. Substitute
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
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
<audio controls src="file.mp3"> <object data="flashplayer.swf?audio=file.mp3"> <param name="movie" value="flashplayer.swf?audio=file.mp3"> <a href="file.mp3">ah, just download it</a> </object> </audio>
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?
Easy. Just flip the order of what constitutes fallback content:
<object data="flashplayer.swf?audio=file.mp3"> <param name="movie" value="flashplayer.swf?audio=file.mp3"> <audio controls src="file.mp3"> <a href="file.mp3">ah, just download it</a> </audio> </object>
That works in Firefox—and any other browser with Flash installed—and it also works on the i(Pad|Phone|Pod).