Question

121

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

rated 0 times [ 128] [ 7] / answers: 1 / hits: 44856 / 12 Years ago, tue, august 28, 2012, 12:00:00

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).

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

markusdamienn

Add To Favorites

Follow

Total Points: 167

Total Questions: 119

Total Answers: 93

Location: Oman

Member since Wed, Apr 12, 2023

1 Year ago

answered 12 Years ago quentinaveryb · Accepted 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.