1

Can Javascript detect a completed video on a webpage? We would like to run a video on firstload (100vh width and height). After watching this video, the CSS of our webpage must change (.videobox visibility hidden; .pagecontent visitbility visible;).

Is there any solution for this?

Kish
  • 94
  • 1
  • 5
  • this might help https://stackoverflow.com/questions/2741493/detect-when-an-html5-video-finishes – Nico Shultz Dec 22 '20 at 09:58
  • Does this answer your question? [Detect when an HTML5 video finishes](https://stackoverflow.com/questions/2741493/detect-when-an-html5-video-finishes) – ATP Dec 22 '20 at 09:59

1 Answers1

1

You can detect when an HTML5 has finished playing with an 'ended' event listener, and update the CSS there:

<video src="video.ogv" id="myVideo">
  video not supported
</video>

<script type='text/javascript'>
    document.getElementById('myVideo').addEventListener('ended',myHandler,false);
    function myHandler(e) {
        // Video has finished playing!
        // To update the CSS in your question,
        // select the proper elements through their class
        // and change their style.
        document.getElementsByClassName('videobox')[0].style.visibility = 'hidden';
        document.getElementsByClassName('pagecontent')[0].style.visibility = 'visible';
    }
</script>

If you encounter any problem or question while implementing my solution, please let me know in a comment.

aryanm
  • 1,183
  • 14
  • 26
  • Just one more question: Any way to make this change more smooth? Can i just add style.transition time or something like that? Maybe something like: The videobox fade up and pagecontent fade down? – Kish Dec 22 '20 at 11:43
  • @Kish take a look at the CSS [transition](https://www.w3schools.com/cssref/css3_pr_transition.asp) property. To make the elements have a fade transition, you would have to change their `opacity` style instead of `visibility`, because `opacity` means how see-through the element is. In your CSS file, set `transition:opacity 2s` on both classes to get a 2-second fade. If my answer helped you, please mark it as the accepted answer through the green check icon! – aryanm Dec 22 '20 at 20:00