无法通过 IE9 上的 JavaScript 更改视频标签的来源答案

【问题标题】：Unable to change source of video tag via JavaScript on IE9无法通过 IE9 上的 JavaScript 更改视频标签的来源
【发布时间】：2011-05-21 08:00:50
【问题描述】：

您好，我正在开发 HTML5 视频播放器，目前我遇到了一个奇怪的错误。我可以在 IE 和 Chrome 中正常播放视频，但是，当我想通过 java 脚本动态更改视频源时，我遇到了麻烦。 Chrome 更改视频源没有任何问题，但 IE9 保持以前的视频完整性，只是没有更改。 Safari 也可以正常工作。

我确实尝试在 stackoverflow 中进行搜索，发现了很多相同的问题并尝试了几乎所有答案，但似乎 IE 有自己的工作方式，或者我遗漏了一些东西。只是为了确保我切换文件以验证两个视频都在 IE9 中工作并且两者都可以，但是当我尝试通过 javascript 操作它们时它们只是不播放。示例代码如下

<div class="video">
     <video id="example_video_2" class="video-js" width="640" height="264" controls="controls" preload="auto" >
        <source src="song.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />             </div>                
   </div>

虽然 javascript 很简单

function myNewSrc() {

    var myVideo = document.getElementById('example_video_2');
  // myVideo.src = "";
   myVideo.src = "120235_VIDHIGH.mov";
    //alert(myVideo.src);
    myVideo.load();

    myVideo.play();
    //changeMovieSource('song.mp4','something');
    //$("#example_video_2 > source").attr("src", "120235_VIDHIGH.mov");
    //alert($("#example_video_2 > source").attr("src"));    
    }

【问题讨论】：

您显示的是损坏的 HTML - 您没有关闭 video 标记？
抱歉在复制粘贴中丢失了。

标签： javascript html html5-video

【解决方案1】：

删除完整的视频 html 元素并创建一个新元素，而不是仅仅替换其属性之一。

【讨论】：

是的，可以，唯一的问题是，由于删除和添加视频元素，它会产生一点闪烁。
也许您可以通过先添加第二个视频标签 (display:none) 来减少闪烁，然后删除第一个并让第二个可见？
替换不是移动设备上的选项，因为当您用另一个视频元素替换一个视频元素时，用户将不得不点击第二个视频元素来开始视频...
遇到了与 IE11 相同的问题，使用 javascript 更改 <source> src 会导致视频无法播放。我不得不用 javascript 生成整个 html 元素。

【解决方案2】：

与 TweeZz 相比，我建议不要删除整个视频元素，因为这会破坏 iOS（和 Android）上的代码。

不要将源元素放在你的 html 中，而是通过 JS 添加它们。 IE9 不允许这样做，您可以再次捕获然后编辑视频元素本身的 src 属性，正如我在这里展示的那样： Video tag not working in IE 9

作为快捷方式，这里是我发布的代码：

$('video').append('<source src="' + pathMp4 + '" type="video/mp4"><source src="' + pathWebm + '" type="video/webm">');
if(!$('video').children('source').length) { // set src&type attribute for ie9/android3.1 because it does not add the source child-elements
    $('video').attr('src', pathMp4 ).attr('type','video/mp4');
}

背景：当您在 html 中设置源元素时，IE9 会优先考虑此信息。稍后，当您使用.src() 函数时，只会覆盖视频元素的 src 属性，但由于 IE9 对源元素的优先级，这无关紧要。

--> 绝对是 IE9 中的一个错误

更新：请查看此帖子以获得更好的解决方案： Video tag not working in IE 9

【讨论】：

【解决方案3】：

仅供参考：您可以通过不使用 <source> 元素而是使用 src 属性来完成这项工作： <video id="example_video_2" class="video-js" width="640" height="264" controls="controls" preload="auto" > <source src="song.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> </video>

刚刚变成 <video id="example_video_2" class="video-js" width="640" height="264" controls="controls" preload="auto" src="song.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'></video>

【讨论】：

【解决方案4】：

不确定这是否导致了您的问题，但您不需要关闭 </video> 标记吗？我知道在 HTML5 中可以省略一些结束标签，但我认为视频不是其中之一，它可能会导致 javascript 出现问题。

【讨论】：

【解决方案5】：

我同意 Berkefeld 关于替换整个视频元素的建议，但是对于这个问题有一个更好的解决方案，而不是按照建议通过 javascript 创建视频元素和附加视频。

我遇到了同样的问题here，经过大量（我的意思是很多）反复试验，我找到了真正的解决方案并将其发布在该页面上。在处理通过 HTML5 视频标签更改视频时，Internet Explorer 是一场噩梦，但这解决了它。

【讨论】：

请在这里转发真正的解决方案！
我同意mrkus-tharkun。如果你也在这里发布真正的解决方案（就像Jörn Berkefeld 那样），我会投票赞成你的帖子。但不幸的是，它从未发生过。

【解决方案6】：

仅在 IE11 中存在与 OP 相同的问题。即使在不更改 video.src 的情况下简单地执行 video.load() 也会出现“无效源”错误。我的问题原来也与服务器有关（IIS 7.5）。

切换到较新的服务器（Windows Server 2012 R2 w/IIS 8.5）并且问题消失了！

【讨论】：