-2

I'm trying to have a <video> autoplay on page load then pause 6 seconds into the video and stay like that.

I have the video playing fine, I'm just having a hard time with JavaScript to make the video pause automatically after 6 seconds of the DOM time.Anyone have code for how to do so?

Jakub Muda
  • 6,008
  • 10
  • 37
  • 56
aidyn
  • 1
  • 2
    Could you please provide your code? Just that we can get an idea of what type of answers you are looking for! – Adnane Ar May 27 '21 at 20:13

2 Answers2

1

You will have to use the onload event to do that here is an exemple:

<!DOCTYPE html>
<html>
<body>
<video id="myVideo" controls autoplay>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<h1>Hello World!</h1>

<script>
const video = document.getElementById('myVideo');
video.onplay = function() {
  window.setTimeout(()=>{
    const video = document.getElementById('myVideo');
    video.pause()
  }, 6000)//6000ms = 6sec
}
</script>

</body>
</html>
Moussa Bistami
  • 929
  • 5
  • 15
  • What if you start the video after 6 seconds? – Emiel Zuurbier May 27 '21 at 20:18
  • What do you mean? Do you want to autoplay after 6 seconds? – Moussa Bistami May 27 '21 at 20:22
  • 1
    No, I mean that the current solution pauses the video after 6 seconds, regardless if it is playing or not. Let's say the video starts playing after 10 seconds, then the `setTimeout` will already be done. Hint: try to start the `setTimeout` *after* the video has started. – Emiel Zuurbier May 27 '21 at 20:27
  • The HTML autoplay Attribute is used to specify that the audio/video should automatically start playing when web page is loaded. So the video would autoplay as the user load, Why would the video start after 6/10 seconds? – Moussa Bistami May 27 '21 at 20:33
  • 1
    @EmielZuurbier Thanks for the specification, Could be a case fixed it. – Moussa Bistami May 27 '21 at 20:41
  • Your code is actually bugged when it comes to full compatibilities, What if the client decided to pause the video for a few seconds before it reachs the 6 seconds, and then resume it? That's why we need to handle the `onpause` event too – Adnane Ar May 27 '21 at 20:46
  • @AdnaneAr the answer does not manage all the cases, But won't cause any bugs... – Moussa Bistami May 27 '21 at 20:55
  • It won't cause any bugs if the user don't interacte with the play/pause button. Otherwise it will break before even the 6seconds pass. I'm not saying your answer is wrong, it's 100% correct but I think it's better to handle the `onpause` event! – Adnane Ar May 27 '21 at 21:10
  • I completely understand your point if it is 100% correct than it won't break, What you're trying to say that if the user interacts with the video It would make it the pause before 6 seconds, Yes! As I said my answer does not manage all the cases but it wont break or bug at any point. Thank you for the specifications. – Moussa Bistami May 27 '21 at 21:16
0

Here you go, once the video is started the interval keeps firing that function which verify if the current time of the video is higher or equal to 6seconds and then does what you need.

;(function(){
  if( !video ) return;

  var videoInterval = null;
  
  video.onplay = function() {
    
    videoInterval = setInterval(_ => {
      if( video.currentTime >= 6 /* 6 seconds */ ) video.pause();
      else console.log( video.currentTime );
    }, 1);
    
  }
  
  video.onpause = function() {
    clearInterval(videoInterval);
    videoInterval = null;
  }
  
  video.onend = video.onpause;

}());
<!DOCTYPE html>
<html>
<body>
  <video id="video" muted controls autoplay>
    <source src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4" type="video/mp4">
    <source src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.ogg" type="video/ogg">
    Your browser does not support the video tag.
  </video>
</body>
</html>
Adnane Ar
  • 683
  • 7
  • 11