动态插入 html5 视频元素在 Opera 中不起作用答案

【问题标题】：Dynamically inserting html5 video element doesn't work in Opera动态插入 html5 视频元素在 Opera 中不起作用
【发布时间】：2010-12-07 10:34:56
【问题描述】：

我正在使用 JavaScript 将视频元素插入 DOM，但它在 Opera (v10.63) 中不起作用。元素被插入，但视频没有出现/播放。适用于 Firefox、Chrome 和 Safari。我仍在运行一些测试，看看我是否可以让它工作，但我只是想知道是否有其他人遇到过这个问题。

在另一个可能对其他人有帮助的注意事项中，似乎事件委托只能使用 Firefox 而不是 Opera、Chrome 或 Safari。这是基于我所做的代码测试，所以它可能是错误的，但我无法让它工作。

非常感谢

【问题讨论】：

奇怪，你有演示链接吗？
嗨 Hallvors，经过多次测试，我发现您不能动态插入视频元素，因为没有任何视频事件被触发，这使得盘子无用。但是您可以做的是将 Video 元素硬编码到 HTML 中，然后动态插入源元素。

标签： javascript html opera

【解决方案1】：

您可以尝试使用HTML5 Inner Shiv。我知道它更针对 IE，但可能值得一试。

【讨论】：

【解决方案2】：

在 Opera 10.63 中可以使用 JavaScript 将视频元素添加到 DOM。例如，下面的代码应该可以工作（我在 Opera 10.61 和 Opera 11 中测试过）。

var vid, makevid;
makevid = function(e){
    vid = document.createElement('video');
    vid.src = 'path/to/an/oggtheorafile.ogv';
        vid.setAttribute('autoplay',true);
    document.getElementsByTagName('body')[0].appendChild(vid);
} 
window.addEventListener('load',makevid,false);

不过，您必须确保您使用的是兼容的视频格式。 Opera 10.63 支持 Ogg/Theora 和 WebM。如果您使用的是 MPEG4/H.264，视频将无法在 Opera 中播放。

（已编辑以更正 Opera 10.6x 中的视频格式支持。它确实支持 WebM）

编辑 2：请注意，如果您使用 JavaScript 在 DOM 中插入视频元素，您还需要使用 vid.setAttribute('controls',true); 或创建自定义控件来启用控件。

【讨论】：