Play HTML5 Video or Flash video based on browser support

Play HTML5 Video or Flash video based on browser support

Post from my blog: http://jbkflex.wordpress.com/2012/01/23/play-html5-video-or-flash-video-based-on-browser-support/

Now with the help of HTML5 we can play inline videos and rich multimedia using the <video> and the <audio> tags

and do not require a flash plug-in or a flash player to play videos or audios anymore. The newer group of browsers

(IE9, Safari 5+, Chrome 6+) have support for HTML5 <video> tag. But older browsers, browsers that do not have

support for HTML5 features (eg. IE 7) still require a flash player and a third party flash plug-in to play multimedia.

While developing a web app, as a developer you always want to support the entire range of users, so how do you

ensure that your video plays for users even with older browsers. This tutorial will explain exactly how to do that.

Check out the demo app first.

Demo:http://jbk404.site50.net/flex/playvideo/

Getting started

In my last post I talked about dynamically passing video URLS as parameter to the flash/flex video player

usingflashvars. This tutorial complements that and builds on top of that.

The main idea is to detect browser support for HTML5 Video using java script and based on the result we will play

either flash video or HTML5 video. Run the demo app in a browser of your choice and you will see which format it

supports. Try running the demo in latest version of Chrome or Safari or Firefox and you will see a HTML5 Video

Player playing the video, also try running the demo in IE8 and you would see the same video played in a flash video

player. However, you will need various formats of the same video to work with different browser conditions. For the

demo I have a .flv, .mp4 and a .ogg format of the same video.

Below I have a compatibility chart for browser video support,

1) .mp4 support

Google Chrome 6 + , Safari 5+, IE 9 +

2) .ogg support

Firefox 4+, Google Chrome 6+, Opera 10.6 +

3) Older browsers – play flash video

Java Script code

The java script code block below (with help from w3schools.com) detects the browser support for video and we

record the result in a variable videoTest. The function returns either “flash” or “html5” based on the detection.

function checkVideo() {

if (document.createElement('video').canPlayType) { //if browser supports HTML5 video

var vidTest = document.createElement("video");

oggTest = vidTest.canPlayType('video/ogg; codecs="theora, vorbis"'); //ogg format

if (!oggTest) { //if it doesnot support .ogg format

h264Test = vidTest.canPlayType('video/mp4; codecs="avc1.42E01E,

mp4a.40.2"'); //mp4 format

http://jbkflex.wordpress.com/2012/01/23/play-html5-video-or-flash-video-based-on-browser-support/

http://jbkflex.wordpress.com/2012/01/23/play-html5-video-or-flash-video-based-on-browser-support/

if (!h264Test) { //if it doesnot support .mp4 format

return "flash"; //play flash

}

else {

if (h264Test == "probably") { //supports .mp4 format

return "html5"; //play HTML5 video

}

else {

return "flash"; //play flash video if it doesnot support any of them.

}

}

}

else {

if (oggTest == "probably") { //supports .ogg format

return "html5"; //play HTML5 video

}

else {

return "flash"; //play flash video if it doesnot support any of them.

}

}

}

else { //browser doesnot support HTML5 video, play flash instead.

return "flash";

}

}

Now, on body load I call the above function and do a little manipulation to play the correct video format. This is how I

have done it,

<body onload="playVideo()">

<div style="background-color:#ccc; width:520px; height:500px; margin-top:20px;"

id="playHere"></div>

<script type="text/javascript">

var htmlContent;

var videoTest = "";

function playVideo() {

var videoTest = checkVideo(); //returns flash-for flash video, html5-for html5

video

if (videoTest == "flash") {

//play flash

htmlContent = '<div style="width:520px; height:500px; text-align:center;">' +

'<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="510" height="490"

id="videoPlayer"> <param name="movie" value="videoPlayer.swf" /><param

name="flashvars" value="videoURL=videos/video1.flv" /> <param name="quality"

value="high" /> <param name="bgcolor" value="#ffffff" /> <param

name="allowScriptAccess" value="sameDomain" /> <param name="allowFullScreen"

value="true" />  <object type="application/x-shockwave-flash"

data="videoPlayer.swf" width="510" height="490"><param name="flashvars"

value="videoURL=videos/video1.flv" /> <param name="quality" value="high" /> <param

name="bgcolor" value="#ffffff" /> <param name="allowScriptAccess"

value="sameDomain" /> <param name="allowFullScreen" value="true" /> 

 <p> Either scripts and active content are not permitted to run

or Adobe Flash Player version 10.0.0 or greater is not installed. </p>  </object> 

</object>' +

'</div>';

}

else if (videoTest == "html5") {

//play html5

htmlContent = '<div style="width:520px; height:500px; text-align:center;">' +

'<video id="videoPlayer" width="500" height="480" preload="auto" controls="controls">'

+

'<source src="videos/video1.mp4" type="video/mp4" codecs="avc1.42E01E, mp4a.40.2"/>' +

'<source src="videos/video1.ogg" type="video/ogg" codecs="theora, vorbis"/>' +

'</video>' +

'</div>';

}

else {

}

document.getElementById("playHere").innerHTML = htmlContent;

if (videoTest == "html5") {

document.getElementById('videoPlayer').play(); //auto play HTML5 video

}

}

</script>

Based on the value of videoTest variable, I have embedded a flash video or an inline HTML5 video into the

document. Your user will now be able to see the video no matter which browser he is using.

To create the flex/flash video player and pass a video URL parameter using flashvars, you can go through my

earlier post, where I have talked exactly about that.

For the full source code you can view source the demo app:http://jbk404.site50.net/flex/playvideo/

Technology

Play HTML5 Video or Flash video based on browser support