Can you use an HTML5 video/audio player with a Flash fail-safe?

Question

I'm trying to figure out my options when it comes to playing both audio and video via the web. I'm sold on the HTML 5 <video /> and <audio />. But, I'd like to be able to display flash video/audio if the HTML video/audio fails.

Is there an easy way to detect if the video/audio is not playing for any reason, then swap out the HTML5 player for a Flash player?

Answer 1

You can pop in your Flash alternative as the last item within the <video> tag, and it’ll play if the HTML5 video doesn’t.

See Mark Pilgrim’s example, as it’s comprehensive and regularly updated: http://diveintohtml5.ep.io/video.html#example

To summarise it:

<video>
    <!-- HTML5 video -->
    <source src="video.webm" type='video/webm; codecs="vp8, vorbis"'>
    <source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'>
    <source src="video.mp4">

    <!-- Flash player fallback for user agents that don’t support HTML5 video -->
    <!-- All user agents that don’t understand the <video> tag, or don’t support
     the video formats you’ve provided, will show this instead. Even IE 6. -->
    <object width="320" height="240" type="application/x-shockwave-flash"
data="flowplayer-3.2.1.swf"> 
        <param name="movie" value="flowplayer-3.2.1.swf">
        <param name="flashvars" value='config={"clip": {"url": "video.mp4", "autoPlay":false, "autoBuffering":true}}'>
    </object>
</video>

Answer 2

If you can freely choose the Flash video player try JWPlayer it has a HTML5/Flash fallback implemented