Javascript For loop loops through all the videos but only plays the last HTML5 video. Why?

Question

I am trying to add all my source video paths in the array called sources. Then, I am trying to play them using my HTML5 video player. However, when I run the loop, (debugging using alert message) - ONLY the last video plays every time, eventhough it loops through all the video names. Why is this?!

<script>
  var i=1;
  var sources = new Array(4);
  var oggVid = document.getElementById('oggSource');      
  var mp4Vid = document.getElementById('mp4Source');
  var webmVid = document.getElementById('webmSource');
  var player = document.getElementById('videoPlayer');
  for (i=1; i < sources.length; i++) {   
      sources[i]="/videolibrary/"+i+".webm";
      var srcName=sources[i];
          // alert(i + "   " + sources.length + " " + srcName);

      }
    function next() { 
      player.pause();
      for (i=1; i < sources.length; i++) {   
      webmVid.setAttribute('src', sources[i]);
      mp4Vid.setAttribute('src', sources[i]);
      oggVid.setAttribute('src', sources[i]);
      player.load();
      player.play(); 
      alert(i + "   " + sources.length + " " + sources[i]);
      }} </script>

The output of alert message (when I click the Next button (that loads the next function)) shows all the sources[i] values in quick succession and the player only plays the last value every time. I don't understand why this is happening! Thanks for your help.

Answer 1

You don't want to loop through all videos every time you click next. Instead you only want to advance to the next video. Try this:

var currentVideo = 1;

function next() { 
    player.pause();
    currentVideo++;
    if(currentVideo >= sources.length) currentVideo = 1;
    webmVid.setAttribute('src', sources[currentVideo]);
    mp4Vid.setAttribute('src', sources[currentVideo]);
    oggVid.setAttribute('src', sources[currentVideo]);
    player.load();
    player.play(); 
    alert(currentVideo + "   " + sources.length + " " + sources[currentVideo]);
}

Answer 2

I got it what you are trying to do.For this you need to understand the following concepts:- 1.Loop will not wait for your code to play all the videos.It is asynchronous .By the time your code goes to player.play() function ,the counter reaches to last value which is your last video .that is why you are getting that problem.

For solving these you need to understand CallBack and setTimeout concepts.

var i=0;
function next() { 

    setTimeout (function()
    {
      i++;
      player.pause();

      webmVid.setAttribute('src', sources[i]);
      mp4Vid.setAttribute('src', sources[i]);
      oggVid.setAttribute('src', sources[i]);
      player.load();
      player.play(); 
      next();
      }
  },6000)
} 

here what the code is doing it is setting i=1,playing your video taking a 6 sec pause and then increasing your counter to 2 again playing your video for 6sec and so on. You can set the time for which you want the videos to run.