我们可以通过对元素通过调用requestFullscreen来开启全屏
通过调用document.exitFullscreen来退出全屏
1.播放器外层容器定义动态样式，播放器本身增加动画
2.定义变量记录当前是否处于全模式
3.切换全屏方法
4.页面样式控制的相关计算属性
5.部分css样式
最近需求中遇到关于全屏展示的需求，于是深入了解了一下demo如下所示？MDN介绍：
使用提供的API，让一个元素与其子元素，可以占据整个屏幕，并在此期间，从屏幕上隐藏所有的浏览器用户界面以及其他应用。
chrome下的全屏表现：
全屏API：
总共用到6个API：
浏览器前缀：
目前并不是所有的浏览器都实现了API的无前缀版本，所以我们需要针对不同浏览器，做一下API的兼容:
1.1 属性
1.1.1 浏览器是否支持全屏模式：document.fullscreenEnabled
document.fullscreenEnabled属性返回一个布尔值，表示当前文档是否可以切换到全屏状态。
const fullscreenEnabled =
document.fullscreenEnabled ||
document.mozFullScreenEnabled ||
document.webkitFullscreenEnabled ||
document.msFullscreenEnabled
if (fullscreenEnabled) {
videoElement.requestFullScreen()
} else {
console.log('浏览器当前不能全屏')
}
1.1.2 返回全屏状态的Element节点document.fullscreenElement
fullscreenElement属性返回正处于全屏状态的Element节点，如果当前没有节点处于全屏状态，则返回null
const fullscreenElement =
document.fullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement
1.2 方法
1.2.1 使元素进入全屏模式：Element.requestFullscreen()
Fullscreen(domName) {
const element = document.querySelector(domName)// 获取dom
const methodName =
this.prefixName === ''
? 'requestFullscreen'
: ${this.prefixName}RequestFullScreen // API前缀
element methodName // 调用全屏
}
值得注意的是：调用此API并不能保证元素一定能够进入全屏模式
初始化直接全屏，会触发进入全屏失败回调。因为这样那就是容易造成欺骗，因为使用了全屏幕API，就会欺骗到人，被成功钓鱼。 大概意思是这样的
1.2.2 退出全屏：document.exitFullscreen()
document对象的exitFullscreen方法用于取消全屏
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen()
} else if (document.msExitFullscreen) {
document.msExitFullscreen()
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen()
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen()
}
}
exitFullscreen()
调用这个方法会让文档回退到上一个调用Element.requestFullscreen()方法进入全屏模式之前的状态。
1.3 全屏事件
1.3.1 进入全屏/离开全屏，触发事件：document.fullscreenchange
当我们进入全屏和离开全屏的时候，都会触发一个 fullscreenchange 事件。
[MDN注意]：此事件不会提供任何信息，表明是进入全屏或退出全屏。
看了好久事件返回的信息，确实找不到一个值，表明这是在进入全屏，或者离开全屏！
可以说相当不人性化了！但我们可以通过检查当前是否有节点处于全屏状态，判断当前是否处于全屏模式。
document.addEventListener("fullscreenchange", function( event ) {
if (document.fullscreenElement) {
console.log('进入全屏')
} else {
console.log('退出全屏')
}
})
1.3.2 无法进入全屏时触发: document.fullscreenerror
浏览器无法进入全屏时触发，可能是技术原因，也可能是用户拒绝。
比如全屏请求不是在事件处理函数中调用,会在这里拦截到错误
screenError(enterErrorFn) {
const methodName = on${this.prefixName}fullscreenerror
document[methodName] = e =>{
enterErrorFn &&enterErrorFn(e)
}
}
1.4 全屏状态的CSS
1.4.1 :full-screen伪类
全屏状态下，大多数浏览器的CSS支持:full-screen伪类，只有IE11支持:fullscreen伪类。使用这个伪类，可以对全屏状态设置单独的CSS属性。
/* 针对dom的全屏设置 /
.div:-webkit-full-screen {
background: #fff
}
/ 全屏属性 /
:-webkit-full-screen {}
:-moz-full-screen {}
:-ms-fullscreen {}
/ 全屏伪类 当前chrome:70 不支持 /
:full-screen {
}
:fullscreen {
/ IE11支持 */
}
1.4.2 :backdrop 伪元素
全屏模式的元素下的即刻渲染的盒子（并且在所有其他在堆中的层级更低的元素之上），可用来给下层文档设置样式或隐藏它
:not(:root):-webkit-full-screen::backdrop {
position: fixed
top: 0px
right: 0px
bottom: 0px
left: 0px
background: #999// 会将背景设为灰色的 如果你没为你的dom设置背景的话，全屏下会为灰色
}
:not(:root):-webkit-full-screen {
object-fit: contain
position: fixed !important
top: 0px !important
right: 0px !important
bottom: 0px !important
left: 0px !important
box-sizing: border-box !important
min-width: 0px !important
max-width: none !important
min-height: 0px !important
max-height: none !important
width: 100% !important
height: 100% !important
transform: none !important
margin: 0px !important
}
1.5 在项目中使用
由于我这个个项目用到的是Vue里面用到了，它对各个方法和属性做了很好的兼容，在开发中可以作参考。 用法很简单，导入库，就可以直接这样调用方法：
fscreen.requestFullscreen(element)
// replacement for: element.requestFullscreen - without calling the function
// mapped to: element.vendorMappedRequestFullscreen
我项目中js使用如下所示
import fscreen from "fscreen"
import Message from "@/components/Message"
export default {
name: "FullScreen",
components: {},
data() {
return {
isFullscreen: false
}
},
computed: {
fullscreenEnabled() {
return fscreen.fullscreenEnabled
},
},
methods: {
onTriggerClick(e) {
if (this.isFullscreen) {
this.onExitFullsreen()
} else {
this.requestFullscreen(document.querySelector(".fullscreen-content"))
}
this.isFullscreen = !this.isFullscreen
},
},
mounted() {
fscreen.addEventListener("fullscreenchange", e =>{
Message.info(this.isFullscreen ? "进入全屏" : "退出全屏")
console.log(e)
})
}
}
