jquery - 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

I create the elements with jQuery using this code

function fsuccLoadVideo(data) {
    var arr = GetNormalizeMetadataClean(data);
    var vid = $('<video width=400 height=300 controls poster=' + arr[0]["CntrTestVideoImage"] + '/>');
    var loc = window.location.href;
    var idx = loc.lastIndexOf('/') + 1;
    var mp4loc = loc.substr(0, idx)+ arr[0]["CntrTestVideoMp4Src"];
    loc =  loc.substr(0, idx)+ arr[0]["CntrTestVideoOggSrc"];
    if ((arr[0]["CntrTestVideoMp4Src"] != undefined) && (arr[0]["CntrTestVideoMp4Src"].length > 0)) {
        $("<source />", { src: loc, type: 'video/webm; codecs="vp8, vorbis"' }).appendTo(vid);
        $("<source />", { src: mp4loc, type: 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"' }).appendTo(vid);
        $("<source />", { src: loc, type: 'video/ogg; codecs="theora, vorbis"' }).appendTo(vid);

        $(vid).append("Your browser does not support the video tag");
        $("#videosection").append(vid);
    }

}

and it renders on the browser this way:

<source 
  src="http://10.1.16.102:90/Intranet/safety/contractortest/video/cntrTest1.ogg" 
  type="video/webm; codecs="vp8, vorbis"">

(can't get formatting correct to show full rendering, but here is the critical line

Answer 1

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.