2

Following along the lines of Control start position and duration of play in HTML5 video, I am trying to make a video jump from one segment to the next automatically when each has finished playing. Each segment will have the same duration, and the start times for each segment will be in an array.

I can't seem to figure out how to loop through the array after addEventListener.

var video = document.getElementById('player1');


function settheVariables() {

var videoStartTime= ["4","15","26","39"];

for (var i = 0; i < videoStartTime.length; i++) {

if (video.currentTime < videoStartTime[0] ){
      video.currentTime = videoStartTime[i];
}
durationTime = 5;

}



//This part works when I plug in numbers for videoStartTime.

video.addEventListener('timeupdate', function() {

    if(this.currentTime > (// videoStartTime [current index] + durationTime)){

    this.currentTime = (// videoStartTime with next index);
    video.play();  }

});

}
Community
  • 1
  • 1
user1877124
  • 37
  • 1
  • 8

1 Answers1

2

you need to change the values in your array to integers, not strings - you're not comparing apples to apples.

the updated and somewhat simplified sample below plays (initially from the start of the video) until the timestamp hits the current marker plus five seconds then jumps to the next marker (and loops back around).

it doesn't cater for the user scrubbing the video themselves (though it will trap as soon as they go >5s past the start of the current section, but going back will confuse things a little) - if you want to control within those 5s boundaries you'll want to do some smarter examination of the time stamp vs the array to make sure you're where you're supposed to be

anyway ... the code:

<script>
var video = document.getElementById('player1');

var videoStartTime= [4,15,26,39];
durationTime = 5;
currentIndex=0;

video.addEventListener('timeupdate', function() {
//  console.log(this.currentTime);

    if (this.currentTime > (videoStartTime[currentIndex] + durationTime))
    {
        currentIndex = (currentIndex + 1) % videoStartTime.length // this just loops us back around
    this.currentTime = videoStartTime[currentIndex];
//    video.play(); // don't need this if the video is already playing
 }

});

</script>
Offbeatmammal
  • 7,970
  • 2
  • 33
  • 52
  • I completely missed the integers/strings issue. And I was overcomplicating it. I am so grateful to people like you for helping me learn. Many thanks. – user1877124 May 10 '13 at 04:58