setAttribute and video.src for changing video tag source not working in IE9
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");
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.
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).
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.
(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).
Answer
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>
And there you have it. Unbelievably simple -- tested and working in IE8, and IE9... If you are having any problems, please let me know.