为什么在IE9中不能使用jQuery动态创建视频元素

Question

我正在尝试使用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/

我想出了以下方法，但在IE9中视频元素是空的，谁能告诉我为什么，我需要改变什么才能在IE9中动态添加视频？它在火狐、Chrome和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"));

已更新-关闭了上面的视频标记并添加了新链接

http://jsfiddle.net/8Cevq/

Answer 1

当您动态添加<video>元素的内容时，IE9不喜欢这样，因此您必须同时添加<video>元素及其内容。

注意:只要您不尝试在之后添加速记<source ... />，IE9似乎就不会有问题。