html - How to make a video jump back to the start after it ends using javascript? - Stack Overflow

admin管理员组

文章数量:1404063

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>

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>

• javascript
• html
• video

Share Improve this question Follow asked Sep 18, 2015 at 14:06 billybobjonesbillybobjones 52311 gold badge77 silver badges1616 bronze badges 1

• possible duplicate of HTML5 video javascript controls - restart video – Jesse Commented Sep 18, 2015 at 14:07

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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./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./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./demos/sample-videos/small.mp4" />
</video>
<video id="testvideo2" controls>
  <source src="http://techslides./demos/sample-videos/small.mp4" />
</video>

本文标签： htmlHow to make a video jump back to the start after it ends using javascriptStack Overflow