h5 video标签的使用

 标签的布置

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

标签的属性配置

autoplay  =>  自动播放

controls   =>  是否显示控件

width       =>  播放器的宽度

height     =>  播放器的高度

loop        =>  是否循环播放

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