How To Check If Your Browser Supports HTML5 Or Not


Recently while working on a video file integration in a website I got this interesting thing for you. As HTML5 supports your .mp4 video files and many more video files like .flv, .oog etc. But the main thing you need to sure about before integrating a video file is if your browser supports HTML5 or not.

If your browser does not support HTML5 then you can not play a .mp4 format in your website, so all you need is a flash video.


Checking Browser Compatibility with HTML5

So my requirement was something like, I was asked to serve the user a flash video if his/her browser does not support HTML5 and .mp4 video if supports HTML5.

As you all of you know that there are many versions of IE till now those people are using, does not support HTML5. So this requirement is a genuine issue for all of us who are trying to integrate video files to their websites.

Let me clarify you if you have a HTML5 compatible browser then you just need 3 line of code to embed a .mp4 video to it in order to play it. See it below.
 <video width="320" height="240" controls>
 <source src="VideoFiles/movie.mp4" type="video/mp4">
Just put the above code to play a .mp4 file stored in the folder VideoFiles.

Now lets check for our main aim i.e HMTL5  compatibility.

Let's take a div inside your HTML code that contains both the .mp4 files and .swf files. Our main aim will be to hide one of them accordingly by considering the browser compatibility.
 <object id="flashVideo" width="0" height="0" style="padding: 10px;">
     <embed width="320" height="240" src="videos/ansupalake.swf" style="margin-top: 10px;">
 <video id="mp4Video"" width="320" height="240" controls>
      <source src="videos/ansupalake.mp4" type="video/mp4">
 Now lets check in JavaScript regarding the compatibility.

 <script type="text/javascript">

    // Define the get_mime function
    var get_mime = function(filetype){
    var mimetype = '';
    var media_container = 'video';

     case 'mp4':
      mimetype = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
     case 'ogg':
      mimetype = 'video/ogg; codecs="theora, vorbis"';
     case 'webm':
      mimetype = 'video/webm; codecs="vp8, vorbis"';
     case 'mp3':
      mimetype = 'audio/mpeg';
      media_container = 'audio';
    return {'mimetype':mimetype,'container':media_container};  

    // Check to see if the browser can render the file type
    // using HTML5
    var supports_media = function(mimetype, container) {
    var elem = document.createElement(container);
    if(typeof elem.canPlayType == 'function'){
     var playable = elem.canPlayType(mimetype);
     if((playable.toLowerCase() == 'maybe')||(playable.toLowerCase() == 'probably')){
      return true;
    return false;

    // When the DOM has loaded check the file extension of each media link
    // and serve up appropriate media player
        /* Use the below three line to get the extension of a file dynamically. Here It gets the attribute "href" of a hyperlink
         and then extension            
          var path = $('#videoFile').attr('href');
          var extension = path.substring(path.lastIndexOf('.') + 1);
          var extension_info = get_mime(extension);
        // Now get the MIME type for type mp4 files.
        var extension_info = get_mime('mp4');
        if(supports_media(extension_info.mimetype, extension_info.container))
                    // Serve up an HTML5 Media Player and controls
              // Serve up a flash based video for browsers that.

    function serve_flash(){
    function serve_html5(){
Let me explain what I have done in the above code. First in the document.ready function I am trying to get the MIME type of the video you want to play. ( here I am using a hard coded value .mp4, you can use the commented code to get the file extension from the HTML element dynamically )

OK, after getting the MIME type we are calling the supports_media method to check if it can create a video element in the DOM dynamically or not.

If it was able to create then we are sure that your browser supports HTML5 otherwise not. And exactly my code serves this way. It returns True if element was created successfully else returns you False . And then server you Flash or HTML5 accordingly by hiding the elements we have created before inside the div first.

Hope this article will help you to check if your browser supports HTML5 or not and to serve video files accordingly.

Happy Coding...

No comments:

Post a Comment