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

IT技术 javascript internet-explorer html5-video setattribute
2021-03-10 15:02:47

我已经逐字阅读了每个关于通过 IE9 中的 javascript 动态更改视频标签源的 stackoverflow 线程,包括有用但未达成一致的帖子herehere,但确实感觉有另一种解决方案。这是我正在尝试做的非常基本的示例:

    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,那也将不胜感激。

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 中测试和工作......如果你有任何问题,请告诉我。

仅供参考,这个答案已有 3 年历史,您是对的,它在 ie8 中不起作用。我有其他 JS 视频标签当时正在回退,并且应该也发布。此外,没有“几乎不起作用”这样的东西,它要么有效,要么无效。如果您对此答案有更新以获得更好的跨浏览器支持,请编辑它,我将接受您的更新。
2021-04-17 15:02:47
IE8?这怎么可能?IE8 不支持 video 标签。
2021-04-20 15:02:47
这在 IE8 中不起作用。此外,Randy 发现的 .mp4 和 .ogg 文件意味着它几乎无法在 IE9 中运行。这是一个非常笨拙的解决方案。
2021-05-01 15:02:47
我打破了它。花了几分钟的时间,但找到了 .. ORDER OR THE <source> ELEMENTS!.. 很关键。.mp4 必须在 .ogg 类型之前。我已经切换了,所以 ff 不会在控制台中说“不支持的类型”。但是 ff 以任何一种方式工作,但其他人却没有!
2021-05-02 15:02:47
我正在使用 html5 vid。浏览器兼容性在这里很困难。时间越来越长,让 IE9 做 ff 和 chrome 可以做的事情。你的帖子钉了它。完美,谢谢。顺便说一句,不错的网站:)
2021-05-07 15:02:47