setAttribute和video.src用于更改IE9中不起作用的视频标记源

setAttribute and video.src for changing video tag source not working in IE9

本文关键字：不起作用 的视频 IE9 video src 用于 setAttribute      更新时间：2023-09-26

我已经阅读了关于在IE9中通过javascript动态更改视频标记源的每一个stackerflow线程，包括这里和这里有用但未达成一致的帖子，但我确实觉得还有另一个解决方案。以下是我尝试做的最基本的例子：

    var video = document.getElementById('video');
    //now, use either of the lines of code below to change source dynamically
    video.src = "nameOfVideo";
    //or use...
    video.setAttribute("src", "nameOfVideo");

这两行代码都被InternetExplorer彻底讨厌，尤其是因为src在用简单的video.getAttribute检查后肯定会被更改，尽管IE实际上并没有做任何切换视频的事情。

是的，有人声称，使用IE，你必须将src与HTML一起列出，以便在页面加载后更改它们，但我确实在stackoverflow上找到了一个线程，它通过简单的JavaScript提出了一个解决方案。（令我失望的是，我再也找不到这样做的线索了……相信我，我到处都找过了）。

话虽如此，如果有人能提供一个解决方案，而不需要将所有视频src放在HTML中，而是使用如上所示的JavaScript动态设置/创建src，我将不胜感激。

（或者，如果你能告诉我"缺失"溢出线程的方向，该线程测试IE中是否存在该属性，然后通过javascript以某种方式设置src，我们也会很感激）。

好消息，我找到了一个真正的解决方案，可以通过JavaScript在HTML5视频标签中切换/更改视频，而无需使用我试图解释的烦人的破解！这是难以置信的简单，它只是花了大量的IE实验。下面是在IE中工作的最简单形式的代码：

<html>
  <body>
    <video id='videoPlayer' width="320" height="240" controls="controls">
       <source id='mp4Source' src="movie.mp4" type="video/mp4" />
       <source id='oggSource' src="movie.ogg" type="video/ogg" />
    </video>
<!-- You MUST give your sources tags individual ID's for the solution to work. -->
    <script>
      var player = document.getElementById('videoPlayer');
      var mp4Vid = document.getElementById('mp4Source');
      player.pause();
      // Now simply set the 'src' property of the mp4Vid variable!!!!
      mp4Vid.src = "/pathTo/newVideo.mp4";
      player.load();
      player.play();
    </script>
  </body>
</html>

这就是它。难以置信的简单——在IE8和IE9中测试和工作。。。如果你有任何问题，请告诉我。

相关文章：