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

javascript internet-explorer html5-video setattribute

43,731

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.

43,731

Author by

mkralla11

Frontend Practice Lead, Senior Web Developer, Multimedia Specialist

Updated on May 04, 2020

Comments

mkralla11 about 4 years
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).
Randy Skretka about 11 years

I am on another go around with html5 vid. Browser compatibility is tough here. Time was piling up getting IE9 to do what ff and chrome could. Your post nailed it. Perfect, thank you. BTW, nice website :)
Randy Skretka about 11 years

I broke it. Took an anxious few minutes but found the .. ORDER OR THE <source> ELEMENTS! .. is critical. .mp4 must be before the .ogg type. I had switched so ff would not say "unsupported type" in the console. But ff works either way but the others do not!
franzlorenzon almost 11 years

IE8? How is that possible? Ie8 doesn't support the video tag.
Lloyd Banks over 8 years

This doesn't work in IE8. Also, what Randy found with .mp4 and .ogg files mean it barely works in IE9. This is a really jenky solution.
mkralla11 over 8 years

just an FYI, this answer is 3 years old and you are correct, it does not work in ie8. I had other JS that the video tags were falling back to at the time, and should have posted that as well. Also, there is no such thing as 'barely works', it either works, or it doesn't. if you have updates for this answer for better cross browser support to-date, please, edit it, and I will accept your updates.
user1788736 about 8 years

it worked on ipad as well but how to go on fullscreen ?
Velojet about 8 years

Brilliant! This is the way to do it. You don't even need jQuery; simply substitute: mp4Vid.setAttribute('src', "/pathTo/newVideo.mp4");
BA TabNabber almost 8 years

This did not work for me but I found a different one...try a different server! Had the same issue as the OP only with IE11. The error "Invalid Source" would crop up even when simply executing video.load() without even changing the video.src. My issue turned out that it was also related to the server ( IIS 7.5). Copied the same code to a newer server (Windows Server 2012 R2 w/ IIS 8.5) and the problems disappeared!