CODEWITHSUNDEEP
internet-explorerwebm
Cat cat Cat cat Cat
Cat cat Cat cat Cat

Reputation: 13

How to test for IE and WEBM playback capability?

I have an HTML5 page serving up video content using the HTML5 video tag. The content itself is encoded using the .webm format, and works great. Except for Internet Explorer, of course.

While newer IEs will properly render the video container, there is no native .webm support, and the browser displays "Invalid Source".

What I do not see, however, is a means to test for the "Invalid Source" result, and then be able to act upon it.

In a perfect world, I could forsee some jQuery testing for "Invalid Source" and then displaying "You need WebM for Internet Explorer (link)!", but I'm not finding any "Invalid Source" in the DOM to test for.

I'm trying to avoid having to use a tacky old-school "what browser is this?" script; but even if I did, I'd still need to know if there was an "Invalid Source" case or not.

What is the best means, if one exists, to test for, and act upon that "Invalid Source" result, when an IE browser does not have the "WebM for Internet Explorer" plug-in?

Upvotes: 1

Views: 353

Answers (1)

Sampson
Sampson

Reputation: 268414

You first check to see if HTML 5 video is supported. If it is, you then need to check for support of webm, which is less straight-forward. Testing for HTML 5 video is trivial:

var element = document.createElement( "video" );

if ( element.canPlayType ) {
    /* HTML 5 <video> is supported
}

Once you've made it this far, you can then use the canPlayType method to determine the likelihood of webm support in your browser:

switch ( element.canPlayType( "video/webm" ) ) {
    case "probably": /* Likely supported */ break;
    case "maybe":    /* Support unknown  */ break;
    case "":         /* Not supported    */
}

From here you can load a different version of the video, fallback to a flash solution, or simply display a message asking the user to take another route.

You can avoid writing the feature-detection logic yourself, and instead use a solution like Modernizr:

if ( Modernizr.video ) {
    if ( !Modernizr.video.webm ) {
        /* webm definitely not supported */
    }
}

Upvotes: 2

Related Questions