引言：
Element.requestFullscreen() 方法用于发出异步请求使元素进入全屏模式。
var Promise = Element.requestFullscreen(options);
options : 一个FullscreenOptions对象提供切换到全屏模式的控制选项。目前，唯一的选项是navigationUI，这控制了是否在元素处于全屏模式时显示导航条UI。默认值是"auto"，表明这将由浏览器来决定是否显示导航条。
兼容：
PC端
| Feature | Chrome | Edge | Firefox | Internet Explorer | Edge | Opera | Safari |
|---|---|---|---|---|---|---|---|
| Basic support | (Yes)webkit[1] | (Yes) | 9.0 (9.0) as mozRequestFullScreen[2]47.0 (47.0) (behind full-screen-api.unprefix.enabled |
11ms[3] | (Yes)[3] | ? | ? |
移动端
| Feature | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | ? | (Yes) | 9.0 (9.0) as mozRequestFullScreen[2]47.0 (47.0) (behind full-screen-api.unprefix.enabled |
? | ? | ? |
用法：
调用此API并不能保证元素一定能够进入全屏模式。如果元素被允许进入全屏幕模式，返回的Promise会resolve，并且该元素会收到一个fullscreenchange事件，通知它已经进入全屏模式。如果全屏请求被拒绝，返回的promise会变成rejected并且该元素会收到一个fullscreenerror事件。如果该元素已经从原来的文档中分离，那么该文档将会收到这些事件。
方法 :
// 调出全屏
function toFullVideo(){
let videoDom = document.documentElement;
if(videoDom.requestFullscreen){
//W3C
return videoDom.requestFullscreen();
}else if(videoDom.webkitRequestFullScreen){
//Chrome等
return videoDom.webkitRequestFullScreen();
}else if(videoDom.mozRequestFullScreen){
//FireFox
return videoDom.mozRequestFullScreen();
}else{
// Edge || ie11
return videoDom.msRequestFullscreen();
}
}
// 退出全屏
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
else if (document.msExitFullscreen) {
document.msExitFullscreen();
}注意：这个方法只能在用户交互或者设备方向改变的时候调用，否则将会失败。
是否全屏监听
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);
document.addEventListener("msfullscreenchange", function () {
fullscreenState.innerHTML = (document.msFullscreenElement)? "" : "not ";
}, false);
标签： js部分H5部分前端front