用于更改视频标签源的 setAttribute 和 video.src 在 IE9 中不起作用 [英] setAttribute and video.src for changing video tag source not working in IE9
问题描述
我确实阅读了每个关于通过 IE9 中的 javascript 动态更改视频标签源的 stackoverflow 线程，包括有用但未达成一致的帖子 此处 和此处，但确实感觉有另一种解决方案.这是我正在尝试做的非常基本的示例:
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 here and here, but do feel like there is another solution. Here is the very basic example of what I'm trying to do:
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 实际上并没有做任何事情来切换视频.
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.
是的，有人声称对于 IE，您必须将 src 与 HTML 一起列出，以便在页面加载后更改它们，但我确实在 stackoverflow 上找到了一个线程，它通过简单的 JavaScript 提出了一个解决方案.(令我失望的是，我再也找不到这样做的线程了......而且我到处搜索，相信我).
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).
综上所述，如果有人可以提供一个解决方案，而无需将所有视频 src 放在 HTML 中，而是使用 JavaScript 动态设置/创建 src，如上所示，我将不胜感激.
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.
(或者，如果您能指出缺失"溢出线程的方向，该线程测试 IE 中是否存在该属性，然后通过 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).
推荐答案
好消息，我找到了一个真正的解决方案，可以通过 JavaScript 切换/更改 HTML5 视频标签中的视频，而无需使用我试图解释的烦人的 hack！它非常简单，而且只需要在 IE 上进行大量试验.下面是在 IE 中工作的最简单形式的代码:
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:
<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 中测试和工作......如果您有任何问题，请告诉我.
And there you have it. Unbelievably simple -- tested and working in IE8, and IE9... If you are having any problems, please let me know.
这篇关于用于更改视频标签源的 setAttribute 和 video.src 在 IE9 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
