HTML5视频播放器组件 全平台自适应 开放下载

原创作品，版权归 laijiadayuan.com 所有，使用请保留出处.

组件信息

this.widgetInfo = {
   fileName   : "lk_video",
   version    : "1.0.0",
   author     : "windKe",
   createTime : "2016 10 5",
   updateTime : "2016 11 2"
};

版本记录

2016-10-5 1.0.0 创建版本 使用原生 js 实现的 html5 移动端和 pc 端通用视频播放组件。样式可以自定义参数配置也很人性化。可以配置视频海报，

参数配置

参数名

类型

默认值

可选值

说明

id

String

video

自定义

视频元素 id

ignoreSize

Boolean

false

true or false

是否忽略视频大小比例

width

Number

1280

自定义

视频宽度

height

Number

720

自定义

视频高度

url

String

02.mp4

自定义

视频资源地址

poster

String

‘’

自定义

视频海报图片地址

volume

Number

0.5

自定义

视频音量大小

loop

Boolean

false

true or false

是否循环播放

muted

Boolean

false

true or false

是否静音

controls

Boolean

false

true or false

是否显示控制栏

defaultPlaybackRate

Number

1

自定义

视频播放速率

autoplay

Boolean

false

true or false

是否自动播放

autoshowcontrolbar

Boolean

true

true or false

是否自动显示半透明控制栏

基础属性和方法

参数名

类型

默认值

示例

说明

widgetInfo

Object

-

-

组件信息

CSS 样式

                                `body{
                                        background: #999;
                                        font-size:12px;
                                        color:#fff;
                                    }
                                    .dn{
                                        display:none;
                                    }
                                    #container{
                                        width:100%;
                                        margin:20px auto;
                                    }
                                    .video-container{
                                        width:100%;
                                        float:left;
                                        position: relative;
                                    }
                                    #video{
                                        box-shadow: 0px 0px 8px rgba(0,0,0,0.5);
                                        width:100%;
                                        position: relative;
                                        z-index: 1;
                                    }
                                    #debug-info{
                                        float:right;
                                        width:30%;
                                        min-height:500px;
                                    }

                                    .dialog-panel{
                                        border:none;
                                        padding:20px;
                                        box-shadow:0px 0px 10px rgba(0,0,0,0.5);
                                        min-width:250px;
                                        text-align: center;
                                    }
                                    .dialog-panel p{
                                        padding:10px 0px;
                                    }
                                    .dialog-panel button{
                                        display:inline-block;
                                        border:none;
                                        width:60px;
                                        height:30px;
                                        line-height: 30px;
                                        padding:0px 10px;
                                        background: rosybrown;
                                        text-align: center;
                                        color:#fff;
                                    }...... 略`

HTML 结构

                                   <div id="container">
    <div class="video-container">
        <video  id="video"></video>
        <div class="video-poster">
            <img src="" alt="" class="video-poster-img"/>
        </div>
        <div class="video-mask">
            <div class="video-pre-playing">
                <i class="fa fa-play"></i>
                <i class="fa fa-pause dn"></i>
            </div>
            <div class="video-pre-pause">
                <i class="fa fa-pause"></i>
            </div>
        </div>

        <div id="video-control-bar" class="video-control-bar">
             <button class="video-btn video-play-btn">
                 <i class="fa fa-play play-btn-i"></i>
                 <i class="fa fa-pause pause-btn-i"></i>
             </button>
             <div class="video-progress-control-bar">
                  <div class="video-progress-slider">
                         <div class="video-drag-progress">

                         </div>
                         <div class="video-time-indicator">
                             01:48
                         </div>
                         <div class="video-loading-progress">

                         </div>
                         <div class="video-playing-progress">

                         </div>

                  </div>
             </div>
            <div class="video-volume-controls">
                    <div class="video-volume-bar">
                        <div class="bar-item"></div>
                        <div class="bar-item"></div>
                        <div class="bar-item"></div>
                        <div class="bar-item"></div>
                        <div class="bar-item"></div>
                        <div class="bar-item"></div>
                        <div class="bar-item"></div>
                    </div>
            </div>
            <div class="video-btn video-hd-btn">
                <i class="fa fa-cc"></i>
                <div class="video-hd-menu">
                    <button class="video-btn "><i class="fa fa-facebook"></i> </button>
                    <button class="video-btn "> <i class="fa fa-youtube"></i></button>
                    <button class="video-btn "> <i class="fa fa-google"></i></button>
                </div>
            </div>
            <button class="video-btn video-full-screen">
                    <i class="fa fa-arrows-alt fullscreen-i"></i>
                    <i class="fa fa-compress zoom-in-i"></i>
            </button>
        </div>
    </div>
    <!--<div id="debug-info">

    </div>-->
</div>

页面调用

window.onload = function(){
     //http://jq22.qiniudn.com/www.jq22.commi4.webm
     var video = new Video('video');
   video.init({ignoreSize:true,url:'images/02.mp4',volume:0.1,autoshowcontrolbar:false});
 };

效果预览