Play HTML5 Video or Flash video based on browser support

  • 1,417 views
Uploaded on

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 …

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/

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,417
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
11
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Play HTML5 Video or Flash video based on browser supportPost 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> tagsand 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 havesupport 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 youensure 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 startedIn my last post I talked about dynamically passing video URLS as parameter to the flash/flex video playerusingflashvars. 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 playeither flash video or HTML5 video. Run the demo app in a browser of your choice and you will see which format itsupports. Try running the demo in latest version of Chrome or Safari or Firefox and you will see a HTML5 VideoPlayer playing the video, also try running the demo in IE8 and you would see the same video played in a flash videoplayer. However, you will need various formats of the same video to work with different browser conditions. For thedemo 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 supportGoogle Chrome 6 + , Safari 5+, IE 9 +2) .ogg supportFirefox 4+, Google Chrome 6+, Opera 10.6 +3) Older browsers – play flash videoJava Script codeThe java script code block below (with help from w3schools.com) detects the browser support for video and werecord 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 Ihave 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 html5video 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" /><paramname="flashvars" value="videoURL=videos/video1.flv" /> <param name="quality"value="high" /> <param name="bgcolor" value="#ffffff" /> <paramname="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" /> <paramname="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 Playerversion 10.0.0 or greater is not installed. </p> <!--<![endif]--> <ahref="http://www.adobe.com/go/getflashplayer"> <imgsrc="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 thedocument. 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 myearlier 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/