H5 video 进入全屏和退出全屏

效果示例

见上图中，video禁用了原生控制条，加载自定义控制条，左侧为关闭，右侧为录像、全屏

以下主要针对全屏功能如何实现。

现在主流浏览器基本上实现了全屏效果，但是不同浏览器实现不一样：

// Webkit (works in Safari5.1 and Chrome 15)
element.webkitRequestFullScreen();
document.webkitCancelFullScreen();
 
// Firefox 10+
element.mozRequestFullScreen();
document.mozCancelFullScreen();
 
// W3C 提议
element.requestFullscreen();
document.exitFullscreen();

一般兼容性写法，我们先使用w3c标准的方法，如果不可以在兼容不同浏览器。

//进入全屏
function FullScreen() {
    var doc = document.documentElement;
    if (doc.requestFullscreen) {
        ele.requestFullscreen();
    } else if (doc.mozRequestFullScreen) {
        doc.mozRequestFullScreen();
    } else if (ele .webkitRequestFullScreen) {
        doc.webkitRequestFullScreen();
    }
}

//退出全屏
function exitFullscreen() {
    var doc = document;
    if (doc.exitFullscreen) {
        doc.exitFullscreen();
    } else if (de.mozCancelFullScreen) {
        doc.mozCancelFullScreen();
    } else if (de.webkitCancelFullScreen) {
        doc.webkitCancelFullScreen();
    }
}

具体示例代码

本示例基于Vue
Html部分

<div class="controls" v-if="isControl">
    <a class="a-btn a-btn-exitfullscreen" v-if="isFull" @click="exitFullScreen">
        <i class="icon material-icons" v-html="'&#xe5d1;'" title="退出全屏"></i>
    </a>
    <a class="a-btn a-btn-fullscreen" v-else @click="fullScreen">
        <i class="icon material-icons" v-html="'&#xe5d0;'" title="全屏"></i>
    </a>
</div>

Js部分

...  // 省略无关代码
data: {
	status: 0, // 记录全屏状态
	isFull: false, // 是否全屏
},
methods: {
	// 进入全屏
    fullScreen(){
        var doc = document.documentElement;
        if (doc.requestFullscreen) {
            doc.requestFullscreen();
        } else if (doc.mozRequestFullScreen) {
            doc.mozRequestFullScreen();
        } else if (doc.webkitRequestFullScreen) {
            doc.webkitRequestFullScreen();
        }

        this.isFull = true;
        this.status = 0;
    },
    // 退出全屏
    exitFullScreen(){
        var doc = document;
        if (doc.exitFullscreen) {
            doc.exitFullscreen();
        } else if (doc.mozCancelFullScreen) {
            doc.mozCancelFullScreen();
        } else if (doc.webkitCancelFullScreen) {
            doc.webkitCancelFullScreen();
        }

        this.isFull = false;
        this.status = 0;
    },
}
...

按照上面代码基本已经实现全屏和退出全屏了。 但是退出全屏不仅可以点击按钮，也可以按Esc 和 F11。 如果用户不是点击按钮退出全屏的话就不能监测到状态的改变，所以还得想办法监测状态改变。

检查全屏状态变化有2种方法

fullscreenchange

document.addEventListener("fullscreenchange", function () {
fullscreenState.innerHTML = (document.fullscreen)? "" : "not ";
}, false);

document.addEventListener("mozfullscreenchange", function () {
fullscreenState.innerHTML = (document.mozFullScreen)? "" : "not ";
}, false);

document.addEventListener("webkitfullscreenchange", function () {
fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not ";
}, false);

resize

document.addEventListener("resize", function () {
fullscreenState.innerHTML = (document.fullscreen)? "" : "not ";
}, false);

本示例使用的是后者，具体代码：

... // 省略无关代码
// 监听reseize
onResize(){
     var self = this;
     
     var throttle = function(func, delay) {            
         var timer = null;            
         return function() {                
             var context = this;               
             var args = arguments;                
             if (!timer) {                    
                 timer = setTimeout(function() {                        
                     func.apply(context, args);                        
                     timer = null;                    
                 }, delay);                
             }            
         }        
     }        
     function handle() {   
         if(self.status && self.isFull){
             self.exitFullScreen();
             self.status = 0;
         } else{
             self.status = 1;
         }    
     } 
     
     window.addEventListener("resize", throttle(handle,500), false);
 },
 ...

通过监测window的窗口大小改变，判断是否由按钮触发，不是按钮触发这为非正常退出全屏，对于全屏状态改变限制每秒只生效一次