h5 video标签的使用

Posted 2021-01-06 rickyctbu

 标签的布置

<video src="1.mp4" poster="1.jpg" id="vid" controls>
　　你的浏览器不支持该视频播放
</video>

 标签的属性配置

 autoplay  =>  自动播放

 controls   =>  是否显示控件

 width       =>  播放器的宽度

 height     =>  播放器的高度

 loog        =>  是否循环播放

 muted     =>  是否静音播放

 poster     =>  视频封面

 src          =>   播放源

 preload   =>   页面加载时进行加载 , 如果有autoplay那么该属性就会被无视

 

标签的js接口

play()        =>  播放

pause()    =>   暂停

currentTime  => 当前播放的位置(s)

duration       => 长度(s)

volume        => 音量

muted          => 静音(boolean)

 

事件

timeupdate  => 根据播放时间变化而触发的事件

注意:该事件只能用addEventListener来定义

let ovideo = document.getElementById(‘vid‘);
ovideo.addEventListener(‘timeupdate‘, function () {
       console.log(`当前的时间点是${ovideo.currentTime},视频长度是${ovideo.duration}`);
}, false)

 

全屏

因为不同浏览器之间的兼容性不同,那么全屏的方法也是不一样的,兼容性写法如下

let fullScreen = elem => {
    let ele = elem;
    if (document.requestFullscreen) {
    　　ele.requestFullscreen();       //w3c标签
    } else if (document.mozRequestFullScreen) {
       ele.mozRequestFullScreen();     //FireFox
    } else if (document.webkitRequestFullScreen) {
       ele.webkitRequestFullScreen();  //Chrome等
    } else if (document.msRequestFullscreen) {
       ele.msRequestFullscreen();      //IE11
    }
};

退出全屏

退出全屏的方法也是不一样的,兼容性写法如下

let exitFullScreen = elem => {
    let ele = elem;
    if (document.exitFullscreen) {
        ele.exitFullscreen();       //w3c标签
    } else if (document.mozCancelFullScreen) {
        ele.mozCancelFullScreen();     //FireFox
    } else if (document.webkitCancelFullScreen) {
        ele.webkitCancelFullScreen();  //Chrome等
    } else if (document.msExitFullscreen) {
        ele.msExitFullscreen();      //IE11
    }
};