h5 video标签的使用

Posted rickyctbu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了h5 video标签的使用相关的知识,希望对你有一定的参考价值。

 标签的布置

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

 


以上是关于h5 video标签的使用的主要内容,如果未能解决你的问题,请参考以下文章

h5 video标签的使用

关于H5 video标签铺满盒子的问题

什么是H5技术???

什么是H5技术???

视频H5 video标签最佳实践

视频H5 video标签最佳实践