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/ For the full post download the document file or visit the blog post link: http://jbkflex.wordpress.com/2012/01/23/play-html5-video-or-flash-video-based-on-browser-support/

1. 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

2. 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";
}

3. }
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" /> <!--[if !IE]>--> <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" /> <!--<![endif]--> <!--[if gte IE 6]>--
> <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> <!--<![endif]--> <a
href="http://www.adobe.com/go/getflashplayer"> <img
src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"
alt="Get Adobe Flash Player" /> </a> <!--[if !IE]>--> </object> <!--<![endif]-->
</object>' +
'</div>';

4. }
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/