Video tag not working in IE 9

Question

The video tag I\'m building will not work in IE9. Its works ok in Firefox and Chrome.

I added the mime to the IIS 7.5 server Extension=.mp4 Mime Type=video/mp4

Answer 1

I'd recommend not adding the codecs to the source type attribute, better to let the browser decide for itself unless you're 100% sure what codec was used to encode the video files.

Answer 2

The problem seems to be that IE9 does not allow to add source tags dynamically. For some reason $('video').append(...) will not work for this element.

you have to do something like this:

$('video').append('<source src="' + pathMp4 + '" type="video/mp4"><source src="' + pathWebm + '" type="video/webm">');
if(!$('video').children('source').length) { // set src&type attribute for ie9/android3.1 because it does not add the source child-elements
    $('video').attr('src', pathMp4 ).attr('type','video/mp4');
}

tested in iOS 4, Android 3.1 & 3.2 and the current versions of FF, Chrome, IE9, Opera and Safari(Win)

.

UPDATE Aug 2012 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

wrote that comment long ago and still get up-/downvotes for it - since then I changed my mind about it: if you use javascript to begin with, simply use the native $('video')[0].canPlayType("video/mp4") (or "video/webm"; or w/o jQuery) to check which source fits and set it using the $('video')[0].src(<URL>) function. The only drawback is that you need a polyfill for Android 2.1 & 2.2 which weren't shipped with canPlayType():

var ua = window.navigator.userAgent.toLowerCase();
if(ua.match(/android 2\.[12]/) !== null)
    HTMLMediaElement.prototype.canPlayType = function(type) {
        return (type.match(/video\/(mp4|m4v)/gi) !== null) ? 'maybe' : '';
    }
}

Thus, I would recommend against using <source> child-nodes if JavaScript is used anyways.

Answer 3

ie9 only supports webm if you install it as 3rd party app.