h5+js视频播放器控件

　　　由于h5兼容性问题,很多浏览器对于插入视频播放的支持都大不相同。火狐支持的比较完整,谷歌则支持的不是很好,很多功能都不能实现,这就需要我们去自制一个播放界面，去兼容不同的浏览器。

　　　只插入一个视频时，浏览器中只会出现这样一个画面。只有单击右键才可以弹出菜单栏显示播放或者显示控件；

　　下面是一个自制播放控件的小练习，比较粗糙，很多功能有待完善。

　　制作中可能用到的一些常见属性和内容：

　　　　1.标签

　　　　2.常用属性：

　　　　　autoplay--自动播放；

　　　　　controls--显示音乐控件；

　　　　　loop--实现循环播放；

　　　　　poster--视频加载未开始时播放的图片；

　　　　3.video支持多视频格式：（以此解决不同浏览器对视频格式的兼容问题）

　　　　4.获取当前视频播放的状态：

　　　　　playbtn(对象).οnclick=function(){

　　　　　　　　if(video.paused){

　　　　　　　　　　video.play();　　

　　　　　　　　}else{

　　　　　　　　video.pause();

　　　　　　　　}

　　　　  }

　　　　5.视频的一些特殊事件：

　　　　1）当视频可以播放获取总时间：

　　　　　vdideo.οncanplay=function(){

　　　　　　　　console.log(video.duration);

　　　　}

　　　　2）视频播放时，获取实时时间：

　　　　　video.ontimedate=function(){

　　　　　　console.log(video.currentTime);

　　　　　}

　　　　3）视频结束：

　　　　　　video.οnended=function(){

　　　　　　}

　　　　实现后的样式：

代码如下，希望大家提出宝贵意见。

  1 2 3     4         5         6         52     53     54         55             60             61                 62                 63                 00:00:0064                 /65                 00:00:0066                 67             68         69         
188     
189 

附:css画play按钮

//less
.play {width: 68px;height: 68px;border-radius: 34px;-webkit-border-radius: 34px;-moz-border-radius: 34px;border: solid 2px rgba(251, 251, 251, 1);position: absolute;top: 44%;left: 50%;margin: -17px 0 0 -27px;-webkit-transition: all 200ms linear;cursor: pointer;i {margin: 20px 27px 27px 26px;display: inline-block;border-width: 12px 0px 12px 20px;border-color: transparent #fff transparent #fff;border-style: solid;width: 0;height: 0;}
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！