CODEWITHSUNDEEP
javascriptjqueryhtmlbrowsermootools
Moe Sweet
Moe Sweet

Reputation: 3721

JS/jQuery/mootools detect broswer supports HTML5

How do I detect if a browser supports HTML5 by

JS

(or)

jquery AND mootools.

Upvotes: 2

Views: 1941

Answers (4)

Strelok
Strelok

Reputation: 51451

To detect the video tag support is quite easy:

if (typeof HTMLVideoElement == 'function') {
  alert('<video> tag supported');
}

That's in my opinion a simplistic version. Here is how the many times mentioned modernizr does it, which is a bit more bullet proof probably:

function supportsVideo() {
        var elem = document.createElement('video'),
            bool = false;

        // IE9 Running on Windows Server SKU can cause an exception to be thrown, bug #224
        try {
            if ( bool = !!elem.canPlayType ) {
                bool      = new Boolean(bool);
                bool.ogg  = elem.canPlayType('video/ogg; codecs="theora"');

                // Workaround required for IE9, which doesn't report video support without audio codec specified.
                //   bug 599718 @ msft connect
                var h264 = 'video/mp4; codecs="avc1.42E01E';
                bool.h264 = elem.canPlayType(h264 + '"') || elem.canPlayType(h264 + ', mp4a.40.2"');

                bool.webm = elem.canPlayType('video/webm; codecs="vp8, vorbis"');
            }

        } catch(e) { }

        return bool;
}

Upvotes: 1

nicosantangelo
nicosantangelo

Reputation: 13726

As the other suggested the best option is to use Modernizr, because it was created especially to do this work.

I don't know any plugin in jQuery that covers this functionality (jQuery.supports doesn't check much) but if you want you could try mooModernizr witch extends MooTools Browser.Features object

Another completely valid option is to check Modernizrs source code, and implment that with the features you want to detect.

Upvotes: 2

Jeff Lauder
Jeff Lauder

Reputation: 1247

Check out modernizr. It is an open source javascript library that specializes in detection of html5 / css3 features: http://www.modernizr.com/

Upvotes: 1

tvanfosson
tvanfosson

Reputation: 532455

Use modernizr to detect HTML5 and CSS features.

Upvotes: 5

Related Questions