用于更改视频标签源的 setAttribute 和 video.src 在 IE9 中不起作用答案

【问题标题】：setAttribute and video.src for changing video tag source not working in IE9用于更改视频标签源的 setAttribute 和 video.src 在 IE9 中不起作用
【发布时间】：2012-08-22 12:13:18
【问题描述】：

我从字面上阅读了有关通过 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，您必须在 HTML 中列出 src，以便在页面加载后更改它们，但我肯定在 stackoverflow 上找到了一个线程，该线程通过简单的 JavaScript 提出了解决方案。（令我失望的是，我再也找不到这样做的线程了......而且我已经到处搜索了，相信我）。

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

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

【问题讨论】：

标签： javascript internet-explorer html5-video setattribute

【解决方案1】：

好消息，我找到了一个真正的解决方案，可以通过 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 中测试和工作...... 如果您有任何问题，请告诉我。

【讨论】：

我正在使用 html5 vid 进行另一次尝试。浏览器兼容性在这里很难。让 IE9 做 ff 和 chrome 可以做的事情的时间越来越长。你的帖子搞定了。完美，谢谢。顺便说一句，不错的网站:)
我把它弄坏了。焦虑了几分钟，但找到了.. ORDER 或元素！ .. 很关键。 .mp4 必须在 .ogg 类型之前。我已经切换，所以 ff 不会在控制台中说“不支持的类型”。但是 ff 可以使用任何一种方式，但其他方式不行！
IE8?这怎么可能？ ie8不支持video标签。
这在 IE8 中不起作用。此外，Randy 在 .mp4 和 .ogg 文件中发现的内容意味着它几乎不能在 IE9 中运行。这是一个非常糟糕的解决方案。
仅供参考，这个答案是 3 岁，你是对的，它在 ie8 中不起作用。我有其他的 JS，当时视频标签回退到了，应该也发布了。此外，没有“勉强有效”之类的东西，它要么有效，要么无效。如果您对此答案有更新以获得更好的跨浏览器支持，请编辑它，我会接受您的更新。