HTML5 重写video控制栏 ,Chrome去除下载按钮

video标签

video控制栏功能

1. volume 声音
2. currentTime 视频进度
3. play/pause 播放/暂停
4. fullscreen 全屏
5. download (Chrome下显示)

---

一般情况下重写控制栏的目的:

1. 样式上的优化,
2. 去除Chrome的下载按钮

---

假设现在获取到一个video Elment 对象 video
如何实现上述功能:

1. 声音 video.volume 设置或返回视频音量
2. 进度 video.currentTime 设置或返回视频中的当前播放位置（以秒计）
3. 播放 video.pause 返回是否暂停 ,play() pause() 暂停播放操作
4. 全屏 requestFullscreen/exitFullscreen 全屏以及退出全屏

问题:
当video全屏的时候是会强制展示默认的控制条

---

解决方案 :
给video标签套一层div ,让video的父标签全屏而video占满父标签即可.

让我们来看一下全屏的代码:
MDN的示例

//dom 表示Element 对象
function toFullScreen(dom){

    if(dom.requestFullscreen){
        return dom.requestFullScreen();
    }else if(dom.webkitRequestFullScreen){
        return dom.webkitRequestFullScreen();
    }else if(dom.mozRequestFullScreen){
        return dom.mozRequestFullScreen();
    }else{
        return dom.msRequestFullscreen();
    }

}
//稍微改造一下,就变成了一个通用的方法,相对于上面方法而言,不会多次执行if else
var toFullScreen= (function(){
    var full = Element.prototype.requestFullscreen ||
        Element.prototype.webkitRequestFullscreen||
        Element.prototype.mozRequestFullScreen||
        Element.prototype.msRequestFullscreen;
    return function(dom){
        full.call(dom)
    }
})()

退出全屏的代码

var exitFullscreen = (function(){
    var full = document.exitFullscreen||
        document.mozExitFullScreen||
        document.webkitExitFullscreen;
    return function(){
        full.call(document);
    }
})()

监听全屏事件 fullScreenChange
判断是否全屏 就不一一赘述了.
然后控制栏的样式编写,就是纯粹的css布局问题了.

1.不要给video 标签添加 controls 属性. controls 和required 属性一样,只需要写了就会生效,而不在乎属性值.
2.用fullScreen和exitfullScreen 控制video的父标签全屏,同时设置video css 样式width,height 100% ,属性值video.width video.height不设置即可.这样父标签全屏,video自动全屏,且不会有控制条,然后再手动添加一个控制条,加上对应事件即可