h5+js实现视频播放的方法
这篇文章主要介绍了h5+js实现视频播放的方法,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
专注于为中小企业提供成都网站建设、网站制作服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业临沭免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了上千家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。
由于h6兼容性问题,很多浏览器对于插入视频播放的支持都大不相同。火狐支持的比较完整,谷歌则支持的不是很好,很多功能都不能实现,这就需要我们去自制一个播放界面,去兼容不同的浏览器。
只插入一个视频时,浏览器中只会出现这样一个画面。只有单击右键才可以弹出菜单栏显示播放或者显示控件;
下面是一个自制播放控件的小练习,比较粗糙,很多功能有待完善。
制作中可能用到的一些常见属性和内容:
1、标签
2、常用属性:
autoplay--自动播放;
controls--显示音乐控件;
loop--实现循环播放;
poster--视频加载未开始时播放的图片;
3、video支持多视频格式:(以此解决不同浏览器对视频格式的兼容问题)
4、获取当前视频播放的状态:
playbtn(对象).onclick=function(){ if(video.paused){ video.play(); }else{ video.pause(); } }
5、视频的一些特殊事件:
1)当视频可以播放获取总时间:
vdideo.oncanplay=function(){ console.log(video.duration); }
2)视频播放时,获取实时时间:
video.ontimedate=function(){ console.log(video.currentTime); }
3)视频结束:
video.onended=function(){ }
实现后的样式:
代码如下:
视频 00:00:00 / 00:00:00
感谢你能够认真阅读完这篇文章,希望小编分享h5+js实现视频播放的方法内容对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,遇到问题就找创新互联,详细的解决方法等着你来学习!
分享题目:h5+js实现视频播放的方法
网址分享:http://myzitong.com/article/podsej.html