How to make a video jump back to the start after it ends using javascript?

Question

You're probably thinking why not just use html's video loop to loop the video. The thing is when I loop the video, it is not smooth and seamless. I've tried to look for other solutions but found none. So I'm trying to instead, make the video jump back to the start when it ends (or nearly ends).

How do I do this using javascript?

<video autoplay id="testvideo" width="100%" height="900px">
    <source src="examplevideo.mp4" type="video/mp4" />
</video>

possible duplicate of [HTML5 video javascript controls - restart video](http://stackoverflow.com/questions/8402158/html5-video-javascript-controls-restart-video) — Jesse, Sep 18 '15 at 14:07

somethinghere · Accepted Answer · 2015-09-18T14:22:59.043

This will loop your video once it reaches the end:

var video = document.getElementById('testvideo')

// When the 'ended' event fires
video.addEventListener('ended', function(){
  // Reset the video to 0
  video.currentTime = 0;
  // And play again
  video.play();
});

<video id="testvideo" autoplay controls>
  <source src="http://techslides.com/demos/sample-videos/small.mp4" />
</video>

If you want to do it earlier, you could check timeupdate - in this case I'll check if we reached 75% of the video.

var video = document.getElementById('testvideo')

// When the 'ended' event fires
video.addEventListener('timeupdate', function(){
  if(video.currentTime > video.duration * .75){
      // Reset the video to 0
      video.currentTime = 0;
      // And play again
      video.play();
  }
});

<video id="testvideo" autoplay controls>
  <source src="http://techslides.com/demos/sample-videos/small.mp4" />
</video>

Keep in mind that a seek (resetting the time) will always jerk a little bit as the data has to be seeked. The only way to work around that is to potentialy use two videos and transition from one to the other before the other one ends. The following code is a bit extensive but actually pretty simple.

// Get both videos
var video1 = document.getElementById('testvideo');
var video2 = document.getElementById('testvideo2');

// Add an event that will switch the active class when the video is about to end
// CSS3 transitions will take into effect and fade one into the other.
video1.addEventListener('timeupdate', function(){
  if(video1.currentTime > video1.duration - .5){
    video1.className = '';
    video2.className = 'active';
    video2.play();
  }
});
video2.addEventListener('timeupdate', function(){
  if(video2.currentTime > video2.duration - .5){
    video2.className = '';
    video1.className = 'active';
    video1.play();
  }
});

// This will reset the video to be replayed
video1.addEventListener('ended', function(){
  video1.currentTime = 0;
});
video2.addEventListener('ended', function(){
  video2.currentTime = 0;
});

video {
  position: absolute; 
  top: 0; 
  left: 0; 
  -webkit-transition: opacity 500ms;
  transition: opacity 500ms;
}
video.active { 
  z-index: 1; 
  opacity: 1; 
  -webkit-transition-delay: 200ms;
  transition-delay: 200ms;
}

<video id="testvideo" class="active" autoplay controls>
  <source src="http://techslides.com/demos/sample-videos/small.mp4" />
</video>
<video id="testvideo2" controls>
  <source src="http://techslides.com/demos/sample-videos/small.mp4" />
</video>

Thank you very much for your time and effort! I really appreciate it :) I used your second solution and it seemed to work quite well. Thank you very much once again! cheers — billybobjones, Sep 18 '15 at 15:55

How to make a video jump back to the start after it ends using javascript?

1 Answers1