如何让视频结束时自动最小化

Question

我使用调用函数“play()”的按钮来全屏播放视频

    <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>

如何让视频停止播放时自动最小化？

Answer 1

.onended()此功能在结束视频中使用。

结束事件在 audio/video 结束时发生。

此事件对于“感谢收听”、“感谢观看”等消息很有用

示例：-

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

Answer 2

您可以向您的视频添加一个事件监听器，它会在视频结束时触发。

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

如何让视频结束时自动最小化

How to make a video minimized automatically when it ends

html

javascript

html5-video