11

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

Community
  • 1
  • 1
mkralla11
  • 1,279
  • 1
  • 13
  • 19

1 Answers1

28

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.

fregante
  • 23,010
  • 11
  • 97
  • 127
mkralla11
  • 1,279
  • 1
  • 13
  • 19
  • 1
    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 Apr 28 '13 at 18:15
  • I broke it. Took an anxious few minutes but found the .. ORDER OR THE 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! – Randy Skretka Apr 28 '13 at 19:08
  • 8
    IE8? How is that possible? Ie8 doesn't support the video tag. – franzlorenzon Jul 08 '13 at 11:49
  • 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. – Lloyd Banks Aug 19 '15 at 22:42
  • 1
    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. – mkralla11 Aug 20 '15 at 20:40
  • it worked on ipad as well but how to go on fullscreen ? – user1788736 Feb 26 '16 at 19:56
  • Brilliant! This is the way to do it. You don't even need jQuery; simply substitute: mp4Vid.setAttribute('src', "/pathTo/newVideo.mp4"); – Velojet Mar 16 '16 at 07:17
  • 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! – BA TabNabber Jul 28 '16 at 22:13