视频标签

视频标签基础入门

<video id="myvideo" controls muted loop>
        <source src="VID_20220220_152236.mp4"></video>
    </video>
    <button id="bt1">播放</button>
    <button id="bt2">全屏</button>
    <button id="bt3">暂停</button>
    <script>
        window.onload=function(){
            var myvideo=document.getElementById("myvideo");
            var bt1=document.getElementById("bt1");

            // 播放
            bt1.onclick=function(){
                myvideo.play();
            }

            //全屏显示
            var bt2=document.getElementById("bt2");
            bt2.onclick=function(){
                requestFullScreen(myvideo);
            }

            // 判断该浏览器是否具有requestFullscreen方法,如果有则直接执行element.requestFullscreen(),没有则做浏览器兼容判断。
            function requestFullScreen(element){
                if(element.requestFullscreen){
                    element.requestFullscreen();
                }
                // 兼容Firefox
                else if(element.mozRequestFullScreen){
                    element.mozRequestFullscreen();
                }
                // 兼容Chrome Safare Opera
                else if(element.webkitRequestFullScreen){
                    element.webkitRequestFullscreen();
                }
                // 兼容IE Edge
                else if(element.msRequestFullScreen){
                    element.msRequentFullscreen();
                }
            }

            // 暂停
            var bt3=document.getElementById("bt3");
            bt3.onclick=function(){
                myvideo.pause();
            }

            // 当前视频的时间
            console.log(myvideo.duration);
        }
    </script>