var video = document.getElementById('video');
//now, use either of the lines of code below to change source dynamically
video.src = "nameOfVideo";
<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.