jquery - 为什么使用 jQuery 动态创建视频元素在 IE9 中不起作用

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 中动态添加视频？它在 Firefox、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

尝试以下操作，这有效:

$("#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 .

我为使它正常工作所做的是:

• A) 使用html 方法一次性注入(inject)所需的标记
• B) 更改标签(在 video 和 source 上)以使用完整的结束标签而不是简写 />

_{顺便说一下，这是一个相当酷的视频。}