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?

Fatimahfatimid

did you look here #3247838 – Ovida

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>

Phelgen

Answer 2

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

Jemine

Answer 3

I'd recommend MediaElementJS.

But to answer your question, the very nature of the video, audio and source elements allows you to present different sources to the browers, which then chooses what it can play. If it can't play any of them, as long as you provide a flash alternative it will go ahead and use that.

Coolant

Answer 4

You can use Modernizr to check if a specific HTML5 tag is supported or not and switch to fail safe option if it isn't, e.g:

if (Modernizr.video) {
    //start using HTML5's video tag
} else {
    // use flash
}

Here's a tutorial on how to use Modernizr Deploy HTML5 & CSS3 w/ Modernizr

Karolekarolina