无法在IE9上通过JavaScript更改视频标记源

Question

嗨，我正在研究HTML5视频播放器，目前我遇到了一个奇怪的错误。 我可以在IE和Chrome中播放视频很好，但是，当我动态想要通过java脚本更改视频源时，我遇到了麻烦。 Chrome更改视频源没有任何问题，但IE9保留以前的视频intect并且不会更改。 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"));    
    }

Answer 1

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

Answer 2

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

相反，不要将源元素放在你的html中，而是通过JS添加它们。 IE9不允许这样你再次捕获然后编辑视频元素本身的src属性，如我在此处所示： 视频标签在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中设置source-elements时，IE9会优先处理此信息。 之后，当你使用.src()函数时，只会覆盖视频元素的src属性，但由于IE9对source-element的优先级排序，这无关紧要。

- >肯定是IE9中的一个bug

更新：请查看此帖子以获得更好的解决方案： 视频标签在IE 9中无效

Answer 3

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

Answer 4

我同意伯克菲尔德关于替换整个视频元素的建议，但是有一个更好的解决方案来解决这个问题，而不是创建视频元素并按照建议通过javascript添加视频。

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

Answer 5

只有IE11与OP有同样的问题。 即使只是简单地执行video.load（）而不更改video.src，也会出现错误“Invalid Source”。 我的问题结果是它也与服务器（IIS 7.5）有关。

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

Answer 6

仅供参考：你可以通过不使用<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" > <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> <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>