<h3>Detect Video Formats with Modernizr tests (with JS control)<br/> <a href="www.aureliomerenda.com/detect-video-formats-support-modernizr-tests/">www.aureliomerenda.com/detect-video-formats-support-modernizr-tests/</a></h3> <br/> <p>Your browser supports:</p> <p><b>OGG:</b> <span id="oggsupport"></span></p> <p><b>H264:</b> <span id="h264support"></span></p> <p><b>WEBM:</b> <span id="webmsupport"></span></p>
/****** MODERNIZR TEST *******/ 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; }); /****** RUN *******/ var oggsupport = Modernizr.videoogg ? "YES" : "NO"; var h264support = Modernizr.videoh264 ? "YES" : "NO"; var webmsupport = Modernizr.videowebm ? "YES" : "NO"; $("#oggsupport").text(oggsupport); $("#h264support").text(h264support); $("#webmsupport").text(webmsupport);