Why does creating a video element dynamically using jQuery not work in IE9

Question

I am trying to recreate the following with Jquery

<video width="640" height="264" autoplay>
    <source src="http://video-js.zencoder.com/oceans-clip.mp4" type="video/mp4" />
    <source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" />
    <source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg" />
</video>

http://jsfiddle.net/4bkpU/2/

I have come up with the following but in IE9 the video element is empty, can anyone tell me why and what I would need to change to be able to dynamically add videos in IE9? It works fine in Firefox, Chrome and Safari.

HTML

<div id="videoHolder">
</div>

JQuery

var video = $('<video width="640" height="264" autoplay></video>')
            .append('<source src="http://video-js.zencoder.com/oceans-clip.mp4" type="video/mp4" />')
            .append('<source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" />')
            .append('<source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg" />')
            .appendTo($("#videoHolder"));

UPDATED - closed the video tag above and addded new link

http://jsfiddle.net/8Cevq/

Answer 1

Try the following, this works:

$("#videoHolder").html(
    '<video width="640" height="264" autoplay>' +
        '<source src="http://video-js.zencoder.com/oceans-clip.mp4" type="video/mp4"></source>' +
        '<source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm"></source>' +
        '<source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg"></source>' +
    '</video>');

JSFIDDLE example.

What I did to get this working was:

• A) use the html method to inject the desired mark-up all at once
• B) Altered tags (on both video and source) to use full closing tags as opposed to shorthand />

_{A rather cool video, by the way.}

Answer 2

IE9 doesn't like it when you add the <video> element's contents dynamically, so you must add the <video> element and it's contents all at once.

Note: IE9 doesn't seem to have a problem with the shorthand <source ... /> as long as you don't try to add it afterwards.