H5 浏览器自定义用户控

参考文章：
https://css-tricks.com/custom...
https://blog.hellojs.org/crea...

原生用户控件

对于 <video>标签，有一个名为 'controls' 的属性，按如下写法就能给播放器增加原生的暂停/开始、进度条、音量、视频最大化这些基础功能。

<video id="myVideo" controls ></video>

但是原生控件往往无法满足我们的一些需求，所以自定义用户控件还是很必要的。
首先声明一个变量，我们把 <video id="video"></video>做如下定义

let videoElement = document.getElementById('video');
let $videoElement = $('#video');

自定义用户控件

如何实现自定义控件，说起来也很简单，只需要借助几个 H5 播放器的事件和属性就可以了：

暂停和开始

暂停和开始是最基本的功能了，实现起来很简单
开始：

videoElement.play()

暂停：

videoElement.pause()

所以只需要在当前视频暂停的时候调用play()方法就可以继续播放，同理在视频正在播放的时候调用pause()就可以了。
提的一提的是『判断当前视频是否暂停』
如果仅用videoElement.paused来判断视频暂停可能会有报错

The play() request was interrupted by a call to pause().

，经过查询，最后使用了isPlaying 变量来判断视频是否暂停

let isPlaying = videoElement.currentTime > 0 && !videoElement.paused && !videoElement.ended && videoElement.readyState > 2;

最后暂停/开始事件的方法如下：

        let playpauseToggle = function(e){
            let isPlaying = videoElement.currentTime > 0 && !videoElement.paused && !videoElement.ended && videoElement.readyState > 2;
            if(!isPlaying) {
                videoElement.play();
            }
            else {
                videoElement.pause();
            }
            return false;
        }

视频当前时长/总时长

这个就很容易了，借助两个参数即可；
duration 可以获取视频总时长
currentTime 可以获取视频当前时长

视频总时长在视频载入后获取一次即可，
视频当前时间则不同，每当视频进度更新一次后，视频当前时间就需要随之更新
loadedmetadata事件：获取视频元数据。
timeupdate事件：视频播放后，更新播放进度的事件。 会有明确的进度变化，可以获取到currentTime
值得一提的是，用duration 和 currentTime 获取到的数据格式是保留了若干位小数，以秒为单位的一个值，通常需要根据需要格式化一下，我为了将『十分钟二十四秒』格式化为10:24这样的格式，创建了如下方法

    let numberToTime = function(number){
            number = parseInt(number,10);
            let minues = 0;
            let second = 0;
        
            minues = parseInt(number / 60, 10);
            second = number % 60

            if(minues<10){
                minues = '0'+ minues
            }

            if(second<10){
                second = '0'+ second
            }

            return minues + ':' + second;
        }

以及监听对应事件并更新当前时间的代码如下

    $videoElement.on('loadedmetadata', function() {
       $('.duration').text(numberToTime(videoElement.duration));
    });

    $videoElement.on('timeupdate', function() {
       $('.current').text(numberToTime(videoElement.currentTime));
    });

 <div class="progressTime">
   <span class="current">00:00</span> / <span class="duration">00:00</span>
</div>

进度条

没有进度条的视频不是好视频，实现一个进度条很重要
声明一点：进度条这里的样式我使用了 bootstrap 的 dom 结构如下

<div class="progress">
  <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">  </div>
  <div class="bufferBar progress-bar progress-bar-buffered"></div>
</div>

有两个条，一个是当前进度，一个是缓冲进度。
基本原理也很简单，获取 当前时间/总时长 * 100% 的值，然后把这个值赋给进度条对应 dom 的样式中的 'width'，通过timeupdate事件不断更新即可。

    $videoElement.on('timeupdate', function() {
        let currentPos = videoElement.currentTime;
        let maxduration = videoElement.duration;
        let percentage = 100 * currentPos / maxduration;
        $('.progress-bar-primary').css('width', percentage + '%');
     })

缓冲进度条和上面的实现基本一致，对应上面currentPos值的是

let currentBuffer = videoElement.buffered.end(0)

进度条不但要能看进度，还要能拖拽进度
拖拽进度的思路是：根据鼠标在进度条上的mousedown事件和mouseup事件鼠标的 X 坐标量（含正负）变化来确定当前进度的变化程度。

具体代码如下：

let timeDrag = false;   /* Drag status */
$('.progress').mousedown(function(e) {
    timeDrag = true;
    updatebar(e.pageX);
});
$(document).mouseup(function(e) {
    if(timeDrag) {
        timeDrag = false;
        updatebar(e.pageX);
    }
});
$(document).mousemove(function(e) {
    if(timeDrag) {
        updatebar(e.pageX);
    }
});
 
let updatebar = function(x) {
    let progress = $('.progress');
    let maxduration = videoElement.duration; //视频总时长
    let position = x - progress.offset().left; //变化量
    let percentage = 100 * position / progress.width();
 
    //超出范围的修正
    if(percentage > 100) {
        percentage = 100;
    }
    if(percentage < 0) {
        percentage = 0;
    }
 
    //更新进度条和当前时间
    $('progress-bar').css('width', percentage+'%');
    videoElement.currentTime = maxduration * percentage / 100;
};

音量

音量的控制很容易，主要借助以下方法和属性，具体的交互可以随心所欲的实现。之前还有看过一篇文章是介绍丧心病狂的音量键的，可以学习学习[滑稽]：http://adquan.com/post-10-410...

videoElement.muted = true //静音
videoElement.muted = false //解除静音

videoElement.volume = 1 //设置音量为最大值
videoElement.volume = 0.5 //设置音量为50%
videoElement.volume = 0 //设置音量为最小值

全屏

全屏是一个兼容起来有点麻烦的功能。
如果你要为 firefox 写用户控件的话，调用全屏 api 的就得是 <video>和<div class="controls"><div>的共同父元素,不然会发现全屏后，你的用户控件看不到了。（但然，firefox 原生的用户控件比 chrome 的好看一百倍，所以你要是用原生的用户控件，那直接 element.requestFullscreen()就行）
同时我们也记下这个 tips ：能调用全屏 api 的不只是<video>

<div class="live__player">
    <video></video>
    <div class="controls"></div>
</div>

//全屏
function fullScreenOn(element) {
    if(element.requestFullscreen) {
        element.requestFullscreen();
    } else if(element.mozRequestFullScreen) {
        $('.live__player')[0].mozRequestFullScreen();
    } else if(element.msRequestFullscreen){ 
        element.msRequestFullscreen(); 
    } else if(element.oRequestFullscreen){
        element.oRequestFullscreen();
    } else if(element.webkitRequestFullscreen)
    {
        element.webkitRequestFullScreen();
    } else{

        var docHtml = document.documentElement;
        var docBody = document.body;
        var videobox = document.getElementById('sfLive');
        var cssText = 'width:100%;height:100%;overflow:hidden;';
        docHtml.style.cssText = cssText;
        docBody.style.cssText = cssText;
        videobox.style.cssText = cssText+';'+'margin:0px;padding:0px;';
        document.IsFullScreen = true;

    }
    $controls.css('z-index','2147483647');
    
}

此处传入的值就是videoElement

<small>`(videoElement = document.getElementById('video');)`</small>

另外一点，最后一行代码做的是：把我们自定义控件的 z-index 属性设置为浏览器最大值。原因是，webkit 内核的浏览器在全屏的时候，视频的 z-index 变为了浏览器允许的最大值，我们把自定义控件的 z-index 也设置为最大值，就能避免用户控件被视频遮住。

同样的，退出全屏模式的代码如下：

function fullScreenOff() {
    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if(document.oRequestFullscreen){
        document.oCancelFullScreen();
    } else if (document.webkitExitFullscreen){
        document.webkitExitFullscreen();
    } else {
        var docHtml = document.documentElement;
        var docBody = document.body;
        var videobox = document.getElementById('sfLive');
        docHtml.style.cssText = "";
        docBody.style.cssText = "";
        videobox.style.cssText = "";
        document.IsFullScreen = false;
    }

    $('.live__playcontrol').css('z-index','1');
}

检查视频是否全屏的代码如下：

let isFullScreen =  document.fullscreenElement ||
                    document.webkitFullscreenElement ||
                    document.mozFullScreenElement ||
                    document.msFullscreenElement

踩坑

1. 视频开始/暂停的判断依据

   文中已写，代码如下

   let isPlaying = videoElement.currentTime > 0 && !videoElement.paused && !videoElement.ended && videoElement.readyState > 2;

2. firefox 全屏后，自定义的用户控件不见了

   文中已写，和其他浏览器不同，firefox 不是用 `<video>`元素的 dom 对象去调用`requestFullscreen()`,而是用 `<video>`元素的父元素去调。
   

3. shadowDom 隐藏的问题
   如果你发现，你明明把 <video>元素的属性controls去掉了，但是原生控件依然显示，那么只有用 CSS 去干掉它

video::-webkit-media-controls-enclosure {
  display:none !important;
}