Skip to content

mylovetop/hivideo

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 

Repository files navigation

hivideo

hivideo是一款自定义的html5 video播放器,重写了播放控制条样式,支持暂停、进度控制、声音控制、全屏播放。

如果在手机端使用,在全屏时支持横屏播放。

在线演示地址:https://heavis.github.io/hivideo/index.html

hivideo支持CommonJs、CMD、AMD规范。

Quick start

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>

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 71.6%
  • CSS 25.2%
  • HTML 3.2%