HTML5视频源无法在IE中成功更改

时间:2013-08-07 14:19:20

标签: javascript html5 internet-explorer html5-video

我对这个问题感到疯狂。我有一个脚本可以更改<video>标记的来源,然后重新加载并播放它。问题是我无法让它在任何版本的Internet Explorer上运行。

我有一组名为sequence.sources的视频源,其中包含:

sequence.sources = ['video.webm', 'video.mp4', 'video.ogv'];

sequences对象是从另一个数组加载的,所以这就是它的动态方面。我用来更改视频源的功能如下:

var videoElem = document.getElementById('video');

// Remove all sources
while (videoElem.firstChild) {
    videoElem.removeChild(video.firstChild);
}

// Add new sources
for (var i = 0; i < sequence.sources.length; i++) {
   var srcElem = document.createElement('source');
   srcElem.setAttribute('src', sequence.sources[i]);
   videoElem.appendChild(srcElem);
}

// Initiate video
videoElem.load();
videoElem.play();

这适用于除IE之外的所有浏览器。我是什么做的?我已经尝试直接修改src标记的<video>属性,但这似乎不起作用。我甚至尝试删除整个<video>标记,并添加一个包含更新源的新标记。没有雪茄。

这可能是偏离主题的,但我正在考虑我必须添加一些.htaccess黑客以使其工作的可能性。任何建议都将不胜感激。

我最后的想法是除了第一个以外的所有来源都有些错误而且不会被播放。有什么方法可以检查它们与IE的兼容性吗?

编辑:开发者工具上的网络标签提供了206 partial作为http请求的结果。这很可能是编码兼容性问题。如果证明是这种情况,我很快就会关闭这个问题。

1 个答案:

答案 0 :(得分:1)

问题是您创建了source个节点,然后尝试更改src属性。这在IE中不起作用。而是仅使用src属性。在我的帖子中可以找到完整的解决方案:https://stackoverflow.com/a/7905151/818732 ...尝试谷歌此类内容并添加“stackoverflow”以获得最佳效果。

顺便问一下:你有没有试过直接添加mp4文件作为属性(在html代码中)?如果是,但它仍然无效,请检查您的服务器是否为.mp4文件(video/mp4)返回正确的mime类型。

最后但并非最不重要 - 利用caniuse.com检查浏览器支持。对于初学者,这里是mp4s的链接:http://caniuse.com/mpeg4