How to make a video minimized automatically when it ends
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?
.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*/
};
You can add an event listener to your video which fires when it ends.
myvideo.addEventListener('ended', () => {
document.exitFullscreen();
});