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

【问题标题】：Why does creating a video element dynamically using jQuery not work in IE9为什么使用 jQuery 动态创建视频元素在 IE9 中不起作用
【发布时间】：2011-11-02 17:43:57
【问题描述】：

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

【问题讨论】：

试试$('<video width="640" height="264" autoplay></video>')（添加</video>结束标签）

标签： jquery internet-explorer html

【解决方案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 方法一次性注入所需的标记
B) 更改标签（在video 和source 上）使用完整的结束标签，而不是简写/>

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

【讨论】：

太棒了，非常感谢。需要以这种方式完成，这似乎很奇怪？
不用担心。无论如何，我认为这种方式更清楚一些；在一堆字符串上使用append，然后在重要元素上使用appendTo，乍一看可能有点过于复杂。
@Tom - 请参阅stackoverflow.com/questions/7878367/…，了解为什么必须使用 $(element).html(videoElement) 一次性插入视频标签。总之，IE9有一个bug，就是在添加视频标签后不允许添加源标签，必须同时添加。

【解决方案2】：

IE9 不喜欢动态添加<video> 元素的内容，所以必须一次性添加<video> 元素及其内容。

注意：IE9 的简写<source ... /> 似乎没有问题，只要以后不尝试添加即可。

【讨论】：

这似乎与我现在发生的事情非常相似。是否有更多关于它不喜欢的细节？