H5自定义视频播放器实现

2018-05-04

前言

目前，只是对自定义视频播放器的初步实现，之后会逐步完善!

一、H5视频、声频常用方法

1.canPlayType(); 检查浏览器是否能够播放指定的视频、声频。

使用canPlayType()方法检查浏览器是否能够播放指定的视频、声频。canPlayType()方法能够返回以下值：

“probably” : 浏览器最有可能支持视频的类型
“maybe” : 浏览器或许能够支持视频的类型
“ “ : 空字符，浏览器不支持视频的类型

值	说明
type	指定视频的种类以及解码器。常用值如下：video/mp4video/oggvideo/webm同时指定常用值及解码器：video/ogg;
JavaScript 语法	audio/video.canPlayType(kind,label,language);

2.load();加载视频、声频元素

使用load()方法重新加载视频元素。load()方法通常用于给video元素加载或设置新的媒体数据。

3.play();播放媒体数据

使用play()方法播放当前视频。该方法通常与pause()方法一起使用，实现播放和暂停功能。使用controls属性显示视频的操作界面（界面上通常包括播放、暂停、滑动条、音量等）。

4.pause();暂停媒体数据

使用pause()方法暂停当前视频。该方法通常与play()方法一起使用，实现播放和暂停功能。使用controls属性显示视频的操作界面（界面上通常包括播放、暂停、滑动条、音量等）。

二、H5视频、声频常用属性

1.autoplay属性自动播放

使用autoplay属性，当视频播放准备工作一旦完成，视频马上播放。

值	说明
true	打开网页，视频自动播放，设置方法：autoplay=true，这时返回true
false	打开网页，视频不自动播放，设置方法：autoplay=false，这时返回false。默认值
JavaScript 语法	audio/video.autoplay=true/false;

2.buffered属性返回声频、视频的缓冲信息

使用buffered属性，返回TimeTanges事件，从TimeTanges事件中可以获得视频、声频的缓冲信息。

在TimeTanges事件中，针对完成缓冲的部分，有表示开始点的start属性和结束点的end属性，与currentTime相同，容纳了以秒计算的实数值。

值	说明
TimeRanges事件	表示声频、视频的缓冲范围； TimeTanges事件的属性：length:获取声频、视频的缓冲长度； start(index):获取缓冲范围的开始点； end(index):获取缓冲范围的结束点注：矩阵的起始序号为0。
JavaScript 语法	audio/video.buffered;

3.controls属性设置或返回视频、声频用户界面

使用controls属性设置或返回能够操作视频、声频播放或停止的用户标准界面。

用户标准界面的构成：

播放
暂停
播放滑条
音量
满屏切换（视频）
字幕切换（如果可用）
字幕轨道（如果可用）

注：使用controls属性设置或返回视频是否带有基本用户操作界面。

值	说明
true	设定用户界面显示
false	设定用户界面不显示
JavaScript 语法	audio/video.controls=true/false;默认值：false

4.currentSrc属性返回当前视频、声频的URL

使用currentSrc属性返回当前视频、声频的URL。如果没有视频或声频安装，将返回空字符。

该属性为只读属性。使用src属性设置视频文件。

返回的值	说明
返回的值	一串字符，即：当前视频、声频的ＵＲＬ。返回完整的ＵＲＬ，包括协议（如：　http://），如果没有设置媒体文件，将返回空字符。
false	设定用户界面不显示
JavaScript 语法	audio/video.currentSrc

5.currentTime属性设置或返回视频、声频的当前播放位置

使用currentTime属性设置或返回视频、声频的当前播放位置（以秒计算）。如果设置了该属性，将跳至被指定的位置开始播放。

值	说明
秒（seconds）	使用秒指定声频、视频的播放位置
返回的值	一个数值，当前的播放时间（以秒计算）
JavaScript 语法	audio/video.currentTime=“seconds”

6.duration属性返回当前视频、声频的长度（以秒计算）

使用duration属性返回当前视频、声频的长度（以秒计算）。如果没有设置声频、视频文件，将返回NaN(Not-a-Number)。

注：该属性为只读属性。

值	说明
返回值	数值，指定的视频的长度，以秒计算。如果没有设置视频，将返回“NaN”（Not-a-Number）。如果只是视频流，没有预定的长度时，将返回 “Inf”（Infinity）。
JavaScript 语法	audio/video.duration

7.ended属性返回视频、声频是否播放完毕

使用ended属性返回视频、声频是否播放完毕。如果播放位置在视频、声频的结束位置，代表声频、视频播放结束。

注：该属性为只读属性。

值	说明
返回值	布尔值，返回true：播放结束返回false：播放没有结束
JavaScript 语法	audio/video.ended

8.loop属性设置或返回视频、声频是否反复播放

使用loop属性，设置或返回视频、声频是否反复播放。

值	说明
true	指定视频、声频反复播放
false	指定视频、声频不反复播放
返回值	布尔值，如果视频、声频反复播放返回true；如果视频、声频不反复播放返回false;
JavaScript 语法	audio/video.loop=true/false

9.muted属性;设置或返回视频、声频是否静音

使用muted属性设置或返回视频、声频是否静音。muted属于逻辑属性。

值	说明
true	声频、视频指定静音
false	声频、视频不指定静音
返回值	布尔值；返回true时静音状态，返回false时不是静音状态。
JavaScript 语法	audio/video.muted=true/false;audio/video.muted（返回）

10.paused属性; 返回视频、声频否是暂停

使用paused属性返回视频、声频是否是暂停。

注：该属性为只读属性。

值	说明
返回值	布尔值，返回true：声频、视频暂停；返回false：声频、视频没有暂停。
JavaScript 语法	audio/video.paused

11.played属性返回代表视频、声频播放部分的TimeTanges对象

使用played属性返回代表视频、声频播放部分的TimeTanges对象。播放部分是一个时间段，用户可以获得多个即时播放时间段。

在TimeTanges事件中，针对播放完毕的部分，有表示开始点的start属性和结束点的end属性，与currentTime相同，容纳了以秒计算的实数值。start与end是以矩阵的形式存在的。

注：该属性为只读属性。

值	说明
TimeTanges事件	代表媒体播放完了部分。TimeTanges事件的属性：length:获取声频、视频的播放长度；start(index):获取视频的开始点end(index):获取视频的结束点注：矩阵的起始序号为0
JavaScript 语法	audio/video.played

12.playbackRate属性设置或返回声频、视频的播放速度

使用playbackRate属性设置或返回声频、视频的播放速度。

值	说明
播放速度	指定当前声频、视频的播放速度。值：1.0:标准速度；0.5:半速（慢速）；2.0:双倍速度（快速）；-1.0:后退（标准速度）；-0.5:后退（半速）;
返回值	数值，速度；默认值：1.0；
JavaScript 语法	audio/video.playbackRate

13.src属性设置或返回当前声频、视频资源的URL

使用src属性返回当前视频、声频资源的URL。

值	说明
URL	指定的视频、声频资源的URL。
	字符串，视频、声频的资源文件的保存地址（URL），返回绝对路径，包括协议（如: http://）
JavaScript 语法	audio/video.src=URLaudio/video.src(返回)

14.volume属性设置或安装视频、声频的音量

值	说明
数量	指定当前声频、视频的音量。值必须取0.0-1.0之间的数值，例：1.0:声音最高（100%,默认值）0.5：中音（50%）0.0:静（相当于静音）
返回值	返回数值，代表当前音量
JavaScript 语法	audio/video.volume(返回)audio/video.volume=数值（设置）

二、H5视频、声频常用属性

1.加载声频、视频过程时，能够触发的事件如下：

开始读入媒体数据时触发的事件(onloadstart)
更改声频、视频的时长时(ondurationchange)
浏览器已加载声频、视频的元数据时触发的事件(onloadedmetadata)
浏览器加载声频、视频当前帧结束后(onloadeddata)
浏览器正在下载媒体数据时(onprogress)
浏览器可以播放媒体数据时(oncanplay)
当浏览器可以在不因缓冲而停顿的情况下播放时(oncanplaythrough)

2.加载声频、视频时，容易受到的干扰,如下：

因出错而中断(abort)
空文件(emptied)
出错(onerror)
下载过程中，意外中断时（onstalled）
浏览器不获取媒体数据时(onsuspend)

3.其它事件

（1）onended事件目前的播放列表结束时触发的事件

使用场景如：当播放结束后自动显示或提示“谢谢观看！”、“谢谢收听！”等。

（2）onpause事件为声频、视频暂停时触发的事件

（3）onplay事件为声频、视频开始播放时触发的事件

（4）onseeked事件为用户改变播放位置后触发的事件

即：用户操作滑动条到新的位置时触发的事件。

（5）onseeking事件为用户开始改变或正在改变播放位置时触发的事件

即：用户正在操作滑动条时触发的事件。

（6）ontimeupdate事件为当前播放位置发生改变后触发的事件

该timeupdate事件经常与Audio/Video事件的currentTime属性配合使用。curentTime属性返回 Audio/Video的当前播放位置。以秒计算。

（7）onvolumechange事件为更改了声频、视频的音量时触发的事件

（8）onwaiting事件为视频因为需要下载下一帧而停止时触发的事件

如果系统的看过以上H5声频、音频的相关知识，那么以下栗子就可以看得懂了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" id="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
    <script type="text/javascript" src="js/remauto.js"></script>
    <title>自定义视频播放器</title>
    <style>
        .video-box{
            position: relative;
            width: 7.5rem;
            height: 4.2rem;
            margin: 0 auto;
        }
        .video-box video{
            width: 7.5rem;
            height: 4.2rem;
        }
        .controls-bar{
            position: absolute;
            left:0;
            bottom: 0;
            width: 100%;
            height: 0.5rem;
            background-color: rgba(0,0,0,0.2);
            z-index: 999;
        }
        .progress {
            position: relative;
            float: left;
            width: 3rem;
            height: 0.06rem;
            background-color: #8ed1bb;
            -webkit-border-radius: 0.05rem;
            -moz-border-radius: 0.05rem;
            border-radius: 0.05rem;
            margin-top: 0.22rem;
            margin-left: 0.16rem;
            cursor: pointer;
        }

        .bar {
            display: inline-block;
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: 100%;
            background: #fff;
            -webkit-border-radius: 0.05rem;
            -moz-border-radius: 0.05rem;
            border-radius: 0.05rem;
        }

        .control {
            position: absolute;
            left: -0.04rem;
            top: -0.04rem;
            width: 0.14rem;
            height: 0.14rem;
            background: #fff;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            z-index: 99;
        }
        .control:before{
            content: '';
            position: absolute;
            right: -0.04rem;
            top: -0.04rem;
            width: 0.22rem;
            height: 0.22rem;
            background: rgba(255,255,255,0.3);
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
        }
        .vioce{
            float: left;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            font-size: 0.16rem;
            margin-left: 0.3rem;
            margin-top: 0.14rem;
            color: #ffffff;
        }

        .video-switch{
            position: relative;
            float: left;
            width: 0.4rem;
            height: 0.4rem;
            border: 1px solid #fff;
            -webkit-border-radius: 0.1rem;
            -moz-border-radius: 0.1rem;
            border-radius: 0.1rem;
            margin: 0.05rem 0.1rem;
            cursor: pointer;
        }
        .switch-pause{
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            width:  0;
            height: 0;
            border: 0.1rem solid transparent;
            border-left: 0.12rem solid #fff;
        }
        .switch-play{
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            width: 0.18rem;
            height: 0.18rem;
            border-left: 0.05rem solid #ffffff;
            border-right: 0.05rem solid #ffffff;
        }

        #fullScreen{
            float: left;
            margin-top: 0.1rem;
            margin-left: 0.3rem;
        }
        .fullscreen-icon{
            display: block;
            width: 0.3rem;
            height: 0.3rem;
            background: url("img/full.png") no-repeat;
            -webkit-background-size: 0.3rem 0.3rem;
            background-size: 0.3rem 0.3rem;
        }
        .video-mask{
            display: none;
        }
        .controls-bar{
            display: none;
        }
        .vioce input[type=range]{
            width: 1.4rem;
            height: 0.08rem;
            -webkit-border-radius: 0.08rem;
            -moz-border-radius: 0.08rem;
            border-radius: 0.08rem;
            vertical-align: middle;
        }
        .voice-icon{
            display: inline-block;
            width: 0.24rem;
            height: 0.24rem;
            -webkit-background-size: 0.24rem;
            background-size: 0.24rem;
            vertical-align: middle;
        }
        .voice-opened-icon{
            background: url("img/voice-opened.png") no-repeat;
        }
        .voice-closed-icon{
            background: url("img/voice-closed.png") no-repeat;
        }
    </style>
</head>
<body>
<div class="video-box">
    <div class="video-btn">
        <div class="video-mask">
            <i class="play-video-icon iconfont icon-bofang"></i>
        </div>
    </div>
    <video autoplay>
        <source src="perch.mp4"  type="video/mp4">
        <source src="movie.ogg"  type="video/ogg">
        您的浏览器不支持 HTML5 video 标签。
    </video>
    <div class="controls-bar">
        <!--开关-->
        <div class="video-switch">
            <div class="switch-btn switch-play"></div>
        </div>

        <!--进度条-->
        <div class="progress">
            <span class="bar"></span>
            <div class="control"></div>
        </div>

        <!--音量-->
        <div class="vioce">
            <i class="voice-icon voice-opened-icon"></i>
            <input type="range" min="0" max="100" value="50" id="vioceControle">
        </div>


        <!--全屏-->
        <div id="fullScreen">
            <i class="fullscreen-icon"></i>
        </div>
    </div>
</div>

<script type="text/javascript">
    //得到video标签对象
    var myVideo = $("video")[0];
    var progress = $(".progress")[0];
    var bar = $(".bar")[0];
    var control = $(".control")[0];
    var fullScreen = document.getElementById("fullScreen");

    $(".video-btn").on("click",function () {
        videoSwitch();
        return false;
    })


    $(".video-switch").on("click",function () {
        videoSwitch();
    })

//    开关控制
    function videoSwitch() {
        if (myVideo.paused){
            myVideo.play();
            $(".video-mask").hide();
            $(".switch-btn").removeClass('switch-pause').addClass('switch-play');
            $(".controls-bar").hide();
        } else{
            myVideo.pause();
            $(".video-mask").show();
            $(".switch-btn").removeClass('switch-play').addClass('switch-pause');
            $(".controls-bar").show();
        }
    }

    //    进度条
    myVideo.addEventListener("timeupdate", function() {
        var scales = myVideo.currentTime / myVideo.duration;
        bar.style.width = progress.offsetWidth * scales/100 + "rem";
        control.style.left = progress.offsetWidth * scales/100 - 0.04  + "rem";
    }, false);

    //    调节音量
    var vioceControle = document.getElementById("vioceControle");
    vioceControle.addEventListener("change",function () {
        myVideo.volume = vioceControle.value/100;
    })

//    控制全屏
    fullScreen.addEventListener('click',function () {
        myVideo.webkitRequestFullScreen();
    })

//    鼠标进入视频，控制栏的显示与隐藏控制
    $(".video-box").on("mouseover",function () {
        $(".controls-bar").show();
    });

    $(".video-box").on("mouseout",function () {
       console.log(myVideo.paused);
       if(!myVideo.paused){
           $(".controls-bar").hide();
       }
    })

//    设置是否静音
    $(".voice-icon").on("click",function () {
        if(myVideo.muted) {
            myVideo.muted = false;
            $(this).removeClass("voice-closed-icon").addClass("voice-opened-icon");
        } else {
            myVideo.muted = true;
            $(this).removeClass("voice-opened-icon").addClass("voice-closed-icon");
        }
        return false;
    })
</script>
</body>
</html>

但是如何使用qq浏览器看该例子的话，会发现视频控制栏还是原来的样式，并不是我们自定义的样式。原因这篇文章已经说过了，只要结合X5同层播放器就能解决了。

参考链接：http://www.webkkl.com/api-v/addtexttrack.php