引言

在做监控视频时，一个很重要需求就是视频全屏以及退出。下面就讲讲用JavaScript来检测全屏以及退出。

全屏实现

全屏有一套Web API已经为我们准备好，见这里，不过有时我们在使用第三方Web SDK时，可能已经提供，比如海康威视、大华、宇视等。但是第三方其实也是基于Web API的二次封装而已，所以本质还是要了解的。

export const clickFullScreen = () => {

const objElement = document.querySelector('.parent-wnd').childNodes[0];//将要全屏的元素

//返回一个Promise，如果要基于全屏之后做一些事情，可以利用Promsie链式调用

objElement.requesetFullscreen().then(()=>{

//... do something

},(err)=>{

console.log(err.message)

});

//也可以采用async/await来分布调用

// return new Promise((resolve, reject) => {

// document.querySelector('.parent-wnd').childNodes[wndIndex].requestFullscreen().then(() => {

// resolve()

// }, (err) => {

// console.log(err.message)

// reject(new Error(err.message))

// })

// });

//再需要do something的地方进行调用

//await clickFullScreen();

//... do something

}

这里需要注意Chrome浏览器需要特殊处理，对于待全屏的元素，需要指定{ width:100%; height:100%}

全屏检测

一般的，我们通过监听document.fullscreenElement是否存在即可，如果处于全屏状态，这个值不为空，否则为空(null)

if(!document.fullscreenElement){

//...do something

}else{

//...do other

}

但是这里有个坑，就是Chrome浏览器（webkit内核）在全屏下是无法监听键盘事件的，如果想在退出全屏下做一些事情，在Chrome浏览器下需要依赖resize事件。

this.__resizeHanlder = this.lodash.debounce(() => {

if (!document.fullscreenElement) { // webkit下全屏无法监听键盘事件，所以只能通过resize事件来监听

this.isFullScreen = false

}

if (this.hasInit && !this.isFullScreen) {

this.initWebCtrl()//退出全屏做的事情

}

}, 150)

window.addEventListener('resize', this.__resizeHanlder)

参考阅读

评论可见，请评论后查看内容，谢谢！！！评论后请刷新页面。