js全屏模式 - Kaiqisan

js全屏模式

観客のみんなさんこんにちは、Kaiqisanです，今天给大家带来的是全屏播放的使用方法，它一般用于播放器的全屏播放功能和H5小游戏中。与点击F11进入全屏模式具有一样的效果。

现在我们的html代码里有两个按钮 类名都是btn，怎样触发全屏观看全部在于您自己的选择(键盘鼠标触发都可以)，下面是全屏观看的代码，直接复制可使用。

		let enter = document.getElementsByClassName('btn')
        enter[0].onclick = function () {
            let element = document.documentElement
            if (element.requestFullscreen) {
                element.requestFullscreen()
            } else if (element.msRequestFullscreen) { // 兼容ie
                element.msRequestFullscreen()
            } else if (element.mozRequestFullScreen) { // 兼容火狐
                element.mozRequestFullScreen()
            } else if (element.webkitRequestFullscreen) { // 兼容chrome和safari
                element.webkitRequestFullscreen()
            }
        }
        enter[1].onclick = function () {
            if (document.exitFullscreen) {
                document.exitFullscreen()
            } else if (document.msExitFullscreen) { // 兼容ie
                document.msExitFullscreen()
            } else if (document.mozCancelFullScreen) { // 兼容火狐
                document.mozCancelFullScreen()
            } else if (document.webkitExitFullscreen) { // 兼容chrome和safari
                document.webkitExitFullscreen()
            }
        }

PS：进入全屏模式之后虽然可以点击esc按钮退出全屏模式，但是最好也要在进入全屏模式之后在页面给用户一个方法退出全屏模式，嘛，用户体验还是很重要的！

总结

这个功能多用于在设计播放器的全屏播放功能的时候使用，在使用它的时候，别忘记了把播放器的尺寸扩大到和屏幕长宽一样，唯有这样才可以达到全屏播放的效果。