小编最近一段时间在使用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前台学习更加简单。

公告：本文内容来源于网络，如有侵权请联络删除