小编最近一段时间在使用PhoneGap开发一个App应用，App需要播放视频，本想直接使用html5的video，但使用它在全屏播放时不支持横屏播放，只能放弃。最终决定还是自己封装一个播放器算了，免得以后要扩展功能麻烦。播放器取名叫做：hivideo。hivideo是一款基于html5的视频播放器，摒弃video原有的播放控制条样式，自己重写了一次。支持暂停、播放进度控制、声音控制、全屏播放。如果是要在手机端使用hivideo，全屏播放时还支持横屏播放。
实现的效果如下：
这款视频播放器带时间进度条，音量、全屏、暂停/播放按钮等功能。为了让播放器在各个浏览器下样式统一，首先要隐藏各个浏览器实现的样式。但一般我们通过浏览器开发工具查看不到播放器下的元素，因为这些元素都是阴影元素，它们是通过文档片段附加到video上，对于文档流是不可见的。
那么，如何使用hivideo呢？
hivideo目录结构如下：
要想使用hivideo，首先得在主界面引入样式hivideo.css文件。
hivideo.js文件可在主页面直接引用，同时也支持CommonJs、AMD规范。
在需要转换为hivideo播放器的video标签上添加属性：
hivideo会自动把上面的video元素转换为hivideo播放器。我们还可以在video标签上设置播放属性：
1.autoplay: 自动播放。
2.isrotate：全屏是否横屏播放，如果在手机端使用hivideo，我们可以设置该属性为true，表示全屏播放时横屏显示。
3.autoHide：播放视频时自动隐藏控制条。
使用方式：
如果是后期动态添加的video元素，也可以通过hivideo动态加载。例如页面动态添加了一个id为”player”的video元素，可通过如下方式把video转换为hivideo播放器：
如果有想学习web前端的同学，可来我们的web前端技术学习QQ群：608334068，免费送整套系统的web前端视频教程！我每晚上8点还会在群内直播讲解前端知识，这是一个仅供粉丝朋友们学习交流的群，欢迎大家前来学习哦~不是学习web前端的小伙伴非诚勿扰哦下面是部分资料截图：
欢迎关注胖胖爱前端的简书号，可视化学习web前端，每天更新文章，让web前端学习更加简单。
声明：本文内容来源于网络，如有侵权请联系删除
网友评论