jQuery video not playing in loop

Functionality: jPlayer to play a list of video, each video is of a different mp4 name. Hence, after the 1st video has finished playing, the jPlayer will play the second video and it carry on playing the videos till it reaches the last video in the video list, after which it will repeat and play the first video again, repeating the 1st video to the last video.

Therefore, it is playing in a loop

What has been done:

Video array contains the list of video
jPlayer method to play the videos

Issue

After jPlayer has played the entire videos from the video List: video_01 to video_0N, the video stops and doesn't loop back to the 1st video to repeat the playlist. Secondly, the error msg is shown when the last video of the video list is played:

Error msg: Uncaught TypeError: Cannot read property 'split' of undefined jquery.jplayer.min.js:66

Hence, at this point, could I get some help as to rectify the following issue and inform what could be the possible reasons to result in this error and the jPlayer video do not replay from the 1st video in the list.

Thanks.

var videoList = ["lib/video/Video_01.mp4", "lib/video/Video_02.mp4", "lib/video/Video_03.mp4", "lib/video/Video_04.mp4", "lib/video/Video_05.mp4", "lib/video/Video_06.mp4", "lib/video/Video_07.mp4", "lib/video/Video_08.mp4", "lib/video/Video_09.mp4", "lib/video/Video_10.mp4"];

var videoIndex = 0;

$(function() {

  //Video Player for First page & to play subsequent videos after 1st video is completed
  $("#Start_Video").jPlayer({
    ready: function() {
      $("#Start_Video").jPlayer("setMedia", {
        m4v: videoList[videoIndex]
      }).jPlayer("play");
    },
    ended: function() {
      videoIndex++;

      if (videoIndex > videoList.length) {
        videoIndex = 0;
      }

      $("#Start_Video").jPlayer("setMedia", {
        m4v: videoList[videoIndex]
      }).jPlayer("play");
    },
    swfPath: "javascript",
    supplied: "webmv, ogv, m4v",
    size: {
      width: 1920,
      height: 1080
    }
  });
  $("#HBOStart_Video").show();
});

<script src="javascript/jquery-1.11.3.min.js"></script>
<script src="javascript/jquery-ui-1.10.3.min.js"></script>
<script src="javascript/jplayer.playlist.min.js"></script>
<script src="javascript/jquery.jplayer.min.js"></script>
<div id="StartPage" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; z-index=1; top:0px; left:0px;">
  <div id="Start_Video" style="position:absolute; z-index:1;"></div>

</div>

Solution

I think you are going over the index here:

ended: function() {
  videoIndex++;

  if (videoIndex > videoList.length) {
    videoIndex = 0;
  }

example: videoList[10] the index are {0,1,2,...,9} so the max value "videoIndex" could take is 9, but videoList.length returns 10 so if(videoIndex > videoList.length) is the same as if(videoIndex > 10) which allow "videoIndex" to be 10... (10 > 10 false)

change your if to:

//(videoIndex == 10 ? videoIndex = 0)
//the max value of videoIndex should be n-1, because the array is 0 based.
if (videoIndex >= videoList.length) {
    videoIndex = 0;
  }

the error :

Error msg: Uncaught TypeError: Cannot read property 'split' of undefined jquery.jplayer.min.js:66

occurs because you are trying to split the content of the videoList[10]... (with videoList defined with 10 video name strings: videoList[10])