0

I am developing a web application which consists of 10 videos to be played sequentially.

My major requirement is the second video must be visible to user only when their first video is completed (reached the end). I have already checked a couple of questions on Stack Overflow, there they defined how to check a video is completed or not using a 'ended' action listener using JavaScript but my requirement is slightly different.

jonrsharpe
  • 115,751
  • 26
  • 228
  • 437
hin
  • 9
  • 1

1 Answers1

1

According to this SO question, we can use an event listener to easily check if the video is done. For example:

<h1>Thanks to Big Buck Bunny</h1>

<video id="video1" controls>
  <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

<video id="video2" style="display: none" controls>
  <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

<script>
  // As seen on https://stackoverflow.com/questions/2741493/detect-when-an-html5-video-finishes
  document.getElementById('video1').addEventListener('ended',myHandler,false);
  function myHandler(e) {
    console.log("Done! Now change from display: none to display: block.");
  }
</script>
In this, we make sure that video2 is not visible. This is why we have a display: none. In the event listener, you have to change the display: none to display: block so it is visible.

If you need help with that, you can easily find it on a Google search.

You can chain these together so once video1 finishes, video2 is available, then once video2 is finished, video3 is available, etc.

I hope I helped you solve your problem :)

Anvay
  • 362
  • 1
  • 14
  • could you please write it as code snippet so that i can execute directly on stack overflow – hin Jul 11 '20 at 09:23
  • I have added the code snippet. You just need to change it from display: none to display: block. That would be pretty easy. – Anvay Jul 11 '20 at 09:35