效果示例
见上图中,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="''" title="退出全屏"></i>
</a>
<a class="a-btn a-btn-fullscreen" v-else @click="fullScreen">
<i class="icon material-icons" v-html="''" 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的窗口大小改变,判断是否由按钮触发,不是按钮触发这为非正常退出全屏,对于全屏状态改变限制每秒只生效一次