How to make a video minimized automatically when it ends

user_14559863 0
Viewed 128

I use a button that calls the function "play()" that make the video play on fullscreen

    <div style="text-align:center"> 
        <form>
        <input type="button" name="something" value="start_experiment" onclick="play(this,vid)"> 
        </form>
     </div>

     <video id="vid" width="320" height="240" class="rounded-circle" >
         <source src="assets/vid/video.mp4" type="video/mp4" >
     </video>

      <script>
        
        function play(button,vidid) {  
        button.style.visibility = "hidden"; 
        var myVideo = vidid;

            if (myVideo.requestFullscreen) {
                myVideo.requestFullscreen();
            }
            else if (myVideo.msRequestFullscreen) {
                myVideo.msRequestFullscreen();
            }
            else if (myVideo.mozRequestFullScreen) {
                myVideo.mozRequestFullScreen();
            }
            else if (myVideo.webkitRequestFullScreen) {
                myVideo.webkitRequestFullScreen();
            }
            
            myVideo.play();
        }
    </script>

How could I make the video auto-minimized when it stops playing?

html5-video html javascript
2 Answers

.onended() this function use in end video.

The ended event occurs when the audio/video has reached the end.

This event is useful for messages like "thanks for listening", "thanks for watching", etc.

example:-

   var vid = document.getElementById("vid");
   vid.onended = function() {
        alert("The video has ended");
        this.exitFullscreen();
        /*any this you add this function*/
   };
user_86042160

You can add an event listener to your video which fires when it ends.

myvideo.addEventListener('ended', () => {
   document.exitFullscreen();
});
user_61263730
Related