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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/12151606/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 07:14:22  来源:igfitidea点击:

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

javascriptinternet-explorerhtml5-videosetattribute

提问by mkralla11

I have literally read every stackoverflow thread regarding changing the video tag source dynamically via javascript in IE9, including the useful but not agreed upon posts hereand here, but do feel like there is another solution. Here is the very basic example of what I'm trying to do:

我已经逐字阅读了每个关于通过 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");

Both of these lines of code are hated thoroughly by Internet Explorer, notably because the src is most definitely being changeed after being checked with a simple video.getAttribute, even though IE is not actually doing anything to switch the video.

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

Yes, there are claims that with IE, you MUST have the src's listed with the HTML in order to change them after the page has loaded, BUT I have definitely found a thread on stackoverflow that proposed a solution via simple JavaScript. (To my disappointment, I can no longer find the thread that did so....and I've searched everywhere, believe me).

是的,有人声称对于 IE,您必须将 src 与 HTML 一起列出,以便在页面加载后更改它们,但我确实在 stackoverflow 上找到了一个线程,它通过简单的 JavaScript 提出了一个解决方案。(令我失望的是,我再也找不到这样做的线程......而且我到处搜索,相信我)。

With all that said, if anyone can provide a solution WITHOUT the use of placing all of the video src's within the HTML and instead, dynamically setting/creating the src's using JavaScript as shown above, I would be extremely grateful.

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

(Or, if you could point me in the direction of the 'missing' overflow thread that tests if the attribute exists in IE, and then somehow set the src via javascript, that will also be appreciated).

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

回答by mkralla11

Great news, I found a true solution to switching/changing videos in HTML5 video tags via JavaScript without using the annoying hack I tried to explain! It's unbelievably simple and it just took a LOT of experimenting with IE. Below is the code in its simplest form to work in IE:

好消息,我找到了一个真正的解决方案,可以通过 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>

And there you have it. Unbelievably simple -- tested and working in IE8, and IE9... If you are having any problems, please let me know.

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