CODEWITHSUNDEEP
htmlcross-browserhtml5-videohtml5-audioprogressive-enhancement
Derek Adair
Derek Adair

Reputation: 21925

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

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?

Upvotes: 6

Views: 1199

Answers (4)

Paul D. Waite
Paul D. Waite

Reputation: 98816

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>

Upvotes: 4

Ian Devlin
Ian Devlin

Reputation: 18870

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.

Upvotes: 2

Bj&#246;rn Kaiser
Bj&#246;rn Kaiser

Reputation: 9912

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

Upvotes: 3

KJYe.Name
KJYe.Name

Reputation: 17169

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

Upvotes: 1

Related Questions