setAttribute and video.src for changing video tag source not working in IE9
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.
<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.