Detect video formats support with Modernizr tests

To detect the compatibilty of the browser for video formats (for <VIDEO> html5 tag), I have created some Modernizr tests.

 

Code

You can detect the support of user’s browser for ogg, mp4 (h264), webm video formats inserting this code after Modernizr script import:

Modernizr.addTest('videoogg', function(){
     var elem = document.createElement('video'),
          bool = false;
     try {
          bool = !!elem.canPlayType;
          if ( bool ) {
               bool = new Boolean(bool);
               bool.ogg = elem.canPlayType('video/ogg; codecs="theora"').replace(/^no$/,'');
               if(bool.ogg == "maybe" || bool.ogg == "probably"){
                    bool = true;
               } else {
                    bool = false;
               }
          }
     } catch(e) { }
     return bool;
});

Modernizr.addTest('videoh264', function(){
     var elem = document.createElement('video'),
          bool = false;
     try {
          bool = !!elem.canPlayType;
          if ( bool ) {
               bool = new Boolean(bool);
               bool.h264 = elem.canPlayType('video/mp4; codecs="avc1.42E01E"').replace(/^no$/,'');
               if(bool.h264 == "maybe" || bool.h264 == "probably"){
                    bool = true;
               } else {
                    bool = false;
               }
          }
     } catch(e) { }
      return bool;
});

Modernizr.addTest('videowebm', function(){
     var elem = document.createElement('video'),
          bool = false;
      try {
          bool = !!elem.canPlayType;
          if ( bool ) {
               bool = new Boolean(bool);
               bool.webm = elem.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/^no$/,'');
               if(bool.webm == "maybe" || bool.webm == "probably"){
                    bool = true;
               } else {
                    bool = false;
               }
          }
     } catch(e) { }
      return bool;
});

 

Explanation

I have used the canPlayType() method of HTML5 tag Video (and Audio).

The canPlayType() method can return one of the following values:

  • “probably” – the browser most likely supports this audio/video type
  • “maybe” – the browser might support this audio/video type
  • “” – (empty string) the browser does not support this audio/video type

source: http://www.w3schools.com/tags/av_met_canplaytype.asp

Therefore the tests are not sure at 100% but they are very probable.

 

Test

I have done this test on Chrome 30, IE 10, Safari 5 and Firefox 19:

OGG MP4/H264 WEBM
Chrome 30 YES YES YES
IE 10 NO YES NO
Safari 5 NO NO NO
Firefox 19 YES NO YES

 

Result

This is the result of the script with only CSS control (using CSS classes for show support of video formats):

http://jsfiddle.net/aureliome/Vhy9T/

 

This is the result of the script with JS control (using object Modernizr for show support of video formats):

http://jsfiddle.net/aureliome/4ZF5q/

Aurelio Merenda

I live in Florence (Italy). I graduated in IT in 2010, I work as Front End Developer in Buongiorno, a NTT Docomo Group company. I specialize in Javascript & AngularJS. I like photography, movies and cats.