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属性，如我在此处所示： 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中设置source-elements时，IE9会优先处理此信息。稍后，当您使用.src()函数时，只会覆盖视频元素的src属性，但由于IE9对source-element的优先级排序，这无关紧要。

- ＆GT;肯定是IE9中的一个错误

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

Answer 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>

Answer 4

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

Answer 5

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

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

Answer 6

只有IE11与OP有同样的问题。错误＆＃34;无效来源＆＃34;即使只是简单地执行video.load（）而不更改video.src也会出现。我的问题结果是它也与服务器（IIS 7.5）有关。

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

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

6 个答案: