Question

I’m attempting to create a HTML5 video player that will play a new video automatically once the current video has ended.

Here is my current code so far (http://jsfiddle.net/fFuez/1/):

<video autobuffer controls width="500" id="player">
   <source src="http://nettuts.s3.amazonaws.com/763_sammyJSIntro/trailer_test.mp4" type="video/mp4" id="source">
</video>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
    $(document).ready( function () { 

      $("#player").bind("ended", function() {
        alert("Finshed, play new video now...");
        $('#source').attr('src', 'http://video-js.zencoder.com/oceans-clip.mp4'); 
      });

    });  
</script>

The ended event is firing (according to the alert();) but the new file does’t seem to be recognized by the player.

Answer 1

Remove the <source> element and add the src attribute directly on the <video> tag. You only need <source> elements when there are more than one source. Then, change the src of the <video> and it should work just fine.

If you need to support more filetypes (OGG video for Firefox, for example), then you should use the canPlayType() method to detect which src extension is needed.