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?
Advertisement
Answer
.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*/ };