hivideo是一款自定义的html5 video播放器,重写了播放控制条样式,支持暂停、进度控制、声音控制、全屏播放。
如果在手机端使用,在全屏时支持横屏播放。
在线演示地址:https://heavis.github.io/hivideo/index.html
hivideo支持CommonJs、CMD、AMD规范。
hivideo源代码目录结构:
hivideo
----assets
----images
----hivideo.css
----hivideo.js
1.需要把上面的所有文件添加到项目中,在主页面中引用样式hivideo.css。
2.hivideo.js文件可以直接在主页面引用,也可以通过CommonJs方式引入。
3.在video元素上标记属性ishivideo为true:
<video ishivideo="true"></video>
4.按照自己需求设置属性:
autoplay 自动播放
isrotate 全屏是否横屏播放
autoHide 播放时是否隐藏控制条
使用方式:
<video ishivideo="true" autoplay="true" isrotate="false" autoHide="true"> <source src="http://www.html5videoplayer.net/videos/madagascar3.mp4" type="video/mp4"> </video>
下面是一个完整的hivideo使用demo:
<!DOCTYPE html> <html lang="en"> <head> <title>hivideo</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="assets/hivideo.css" /> <script type="text/javascript" src="hivideo.js"></script> <style type="text/css"> .main-wrap{ margin: 0 auto; min-width: 320px; max-width: 640px; } .main-wrap video{ width: 100%; } </style> </head> <body> <div class="main-wrap"> <video ishivideo="true" autoplay="true" isrotate="false" autoHide="true"> <source src="http://www.html5videoplayer.net/videos/madagascar3.mp4" type="video/mp4"> </video> </div> </body> </html>