11

我从字面上阅读了有关通过 IE9 中的 javascript 动态更改视频标签源的每个 stackoverflow 线程，包括有用但未同意的帖子here和here，但确实感觉还有另一种解决方案。这是我正在尝试做的非常基本的示例：

    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");

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

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

话虽如此，如果有人可以提供解决方案，而不使用将所有视频 src 放置在 HTML 中，而是使用 JavaScript 动态设置/创建 src，如上所示，我将非常感激。

（或者，如果您可以指出我的“缺失”溢出线程的方向，该线程测试该属性是否存在于 IE 中，然后以某种方式通过 javascript 设置 src，那也将不胜感激）。

4

1 回答 1

29

好消息，我找到了一个真正的解决方案，可以通过 JavaScript 切换/更改 HTML5 视频标签中的视频，而无需使用我试图解释的烦人的 hack！它简单得令人难以置信，而且只需要对 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 中测试和工作...如果您有任何问题，请告诉我。

于 2012-09-16T15:11:18.843 回答