Question

I currently have this:

Javascript

<script>
$('document').ready(function(){
  $('video').get(0).play();
 // $('video').bind('ended', function(){
 //   $(this).next('video');
 // });
  $('video').each(function(val, index){
    $(this).bind('ended', function(){
      $(this).get(index + 1).play();
    });
  });
});
</script>

HTML

<video width="703" height="704" controls preload="auto" src="LOW.mp4">Video format not supported.</video>

<h3>CBS - m4v</h3>
<video width="703" height="704" controls preload="auto" src="1100.m4v">Video format not supported.</video>

<h3>Video #3</h3>
<video width="703" height="704" controls preload="auto" src="yep.mp4">Video format not supported.</video>

Right now, the javascript isn’t working. How do I play the next video as soon as the first video finishes and then play the third one once the second one finishes. There aren’t always 3 videos, there coudld be more.

Answer 1

You have two small errors in your script the following code is untested, but should work:

$(function(){
    var videos = $('video').each(function(index){
        $(this).bind('ended', function(){
            var video = videos[index + 1];
            video && video.play();
        });
    });
    if(videos.get(0).play){
        videos.get(0).play();
    }
});

Here are some of your error:

1. each(fn(val, index){}) the callback of each is called with index as first argument and element as second one ( each(fn(index, video){})
2. $(this).get(index + 1) this referrs to the video element not to a list of videos (+ index is also the video see above)