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 using flashvars. 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
      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" /> <!--[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>';
    }
    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/

3 thoughts on “Play HTML5 Video or Flash video based on browser support

  1. on the html side, how do you call out the checkVideo function? I see it in the code, but where does the js file actually live? is it in the same directory? how does the html know to call a specific function?
    sorry new to javascript…

    • Hi Jonathan
      There is no separate js file for the demo. The java script code is included in the HTML file only. So right click the demo page and view source. You will find it. Moreover I start the javascript function call in the body onload – . SO this is where it all starts.
      Thanks.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s