跳转到主内容
极星编程网:以代码为星,赴技术山海!

h5+js如何实现视频播放?简单视频播放器控件的制作

h5+ js 如何实现视频播放?本篇文章就给大家通过示例介绍使用h5+js制作视频播放器控件的方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。【推荐教程: html5视频教程 】 由于h5兼容性问题,很多浏览器对于插入视频播放的支持都大不相同。火狐支持的比较完整,谷歌则支持的不是很好,很多功能都不能实现,这就需要我们去自制一个播放界面,去兼容不同的浏览器。 只插入一个视频时,浏览器中只会出现这样一个画面。只有单击右键才可以弹出菜单栏显示播放或者显示控件; 下面是一个自制播放控件的小练习,比较粗糙,很多功能有待完善。 制作中可能用到的一些常见属性和内容: 1、标签 2、常用属性: autoplay--自动播放; controls--显示音乐控件; loop--实现循环播放; poster--视频加载未开始时播放的图片; php版微信js-sdk支付接口类 php版微信js-sdk支付接口类 下载 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
以上就是本篇文章的全部内容,希望能对大家的学习有所帮助。更多精彩内容大家可以关注php中文网相关教程栏目!!!

相关文章