Widget:HTML5 Support

This widget tests a browser's support for HTML5 video.

Insert this widget into any web page with the following text

  <\/script>')

// Pretty user agent parsing from http://odyniec.net/blog/2010/09/decrypting-the-user-agent-string-in-javascript/ /** * Extracts the browser name and version number from user agent string. * * @param userAgent *           The user agent string to parse. If not specified, the contents of *           navigator.userAgent are parsed. * @param elements *           How many elements of the version number should be returned. A *           value of 0 means the whole version. If not specified, defaults to *           2 (major and minor release number). * @return A string containing the browser name and version number, or null if *        the user agent string is unknown. */ function identifyBrowser(userAgent, elements) { var regexps = { 'Chrome': [ /Chrome\/(\S+)/ ], 'Firefox': [ /Firefox\/(\S+)/ ], 'MSIE': [ /MSIE (\S+);/ ], 'Opera': [ /Opera\/.*?Version\/(\S+)/,    /* Opera 10 */ /Opera\/(\S+)/                 /* Opera 9 and older */ ],           'Safari': [ /Version\/(\S+).*?Safari\// ] },       re, m, browser, version; if (userAgent === undefined) userAgent = navigator.userAgent; if (elements === undefined) elements = 2; else if (elements === 0) elements = 1337; for (browser in regexps) while (re = regexps[browser].shift) if (m = userAgent.match(re)) { version = (m[1].match(new RegExp('[^.]+(?:\.[^.]+){0,' + --elements + '}')))[0]; return browser + ' ' + version; }   return null; }

function supports_video { return !!document.createElement('video').canPlayType; }

var typeStringArray = [ { name: "WebM", string: 'video/webm; codecs="vp8, vorbis"' }, { name: "h.264 MPEG-4", string: 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'}, { name: "Ogg Theora", string: 'video/ogg; codecs="theora, vorbis"'} ]; function supportsType( typeString ) { if (!supports_video) { return false; } var v = document.createElement("video"); return v.canPlayType( typeString ); }

$(document).ready( function {    var video_support;     if (supports_video) { video_support = 'does' } else { video_support = 'does not' };    $('.widget_html5_support_results').html( ' Your Browser: ' + identifyBrowser( navigator.userAgent ) + ', ' + video_support +' support the &lt;video&gt; tag. ' );   $('.widget_html5_support_results').append('  ');    $(typeStringArray).each( function( i, v ) { var result = supportsType( v.string ); if ( result === "probably" || result === "maybe" ) { result = "" } else { result = "" } $('.widget_html5_support_results table').append(' ' + result + "  " + v.name + '  '); });   }) //-->