Tom
Tom

Reputation: 4577

Code to have browser choose Flash player first, then fall back to HTML5 video

I'm just making video on my site HTML5 compliant for portable iOS devices and one thing I'm running into is that I would like to have the client browser try the Flash player first because it's more customizable and if Flash is unavailable, try HTML5.

I had thought that maybe the order in the video tag would do it but it always goes to HTML5 regardless of the order of the tags.

For example:

<video width="640" height="360" controls>
     <object width="640" height="360"><embed src="flashplayer.swf?movie=movie.mp4" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="360"></embed></object>
     <source src="/video/ogg/movie.ogg" type="video/ogg">
     <source src="/video/mp4/movie.mp4" type="video/mp4">
</video>

Any help would be appreciated, thanks.

Upvotes: 1

Views: 3052

Answers (3)

Alexander Klimetschek
Alexander Klimetschek

Reputation: 3714

To do it without Javascript, I think you could put the <video> tag inside the <object>/<embed> to act as fallback if the browser cannot execute the object, i.e. the Flash player plugin is not available:

<object width="640" height="360">
    <embed src="flashplayer.swf?movie=movie.mp4" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="360">
        <video width="640" height="360" controls>
            <source src="/video/ogg/movie.ogg" type="video/ogg">
            <source src="/video/mp4/movie.mp4" type="video/mp4">
        </video>
    </embed>
</object>

Note that you can do it with a pure <object> tag, no need for <embed> in most modern browsers, AFAIK.

Upvotes: 2

martineno
martineno

Reputation: 2635

You could try the HTML 5 video player widget that that is based on the Kaltura open source library. It will let you customize both the HTML 5 as well as the Flash video player.

Upvotes: 1

Lars Bl&#229;sj&#246;
Lars Bl&#229;sj&#246;

Reputation: 6127

You can use SwfObject to detect Flash, and put the video element in the div that SwfObject replaces if Flash is available.

Upvotes: 5

Related Questions