全屏化（类似F11）

全屏化（类似F11）

/**

 * 开启全屏

 */
requestFullscreen(el: any, options: FullscreenOptions = { navigationUI: 'hide' }) {
        const requestFullscreen = el.webkitEnterFullscreen || el.requestFullscreen || el.mozRequestFullScreen || el.webkitRequestFullscreen || el.msRequestFullscreen;
        if (requestFullscreen) {
            requestFullscreen.call(el, options);
        }
    }

/**

 * 关闭全屏

 */

exitFullscreen() {
        const exitFullscreen = document.exitFullscreen || (document as any).webkitExitFullscreen;
        if (exitFullscreen) {
            exitFullscreen.call(document);
        }
    }

方式二：

handleFullscreen() {
    this.isFullscreen = !this.isFullscreen;
    var docElm = this.$refs.fullscreenDom; // ref绑定需要全局放大的元素；
    if (this.isFullscreen) { // 开启
        if (docElm.requestFullscreen) {
            docElm.requestFullscreen();
        }
        else if (docElm.msRequestFullscreen) {
            docElm.msRequestFullscreen();
        }
        else if (docElm.mozRequestFullScreen) {
            docElm.mozRequestFullScreen();
        }
        else if (docElm.webkitRequestFullScreen) {
            docElm.webkitRequestFullScreen();
        }
        else {
            console.log('当前浏览器不支持全屏化操作！');
        }
    }
    else { // 关闭
        if (document.exitFullscreen) {
            document.exitFullscreen();
        }
        else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }
        else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        }
        else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        }
        else {
            console.left('当前浏览器不支持全屏化操作！');
        }
    }
},

• 横屏处理：h5没有直接横屏的函数调用，可以使用 transform: rotate(90deg)；

• ios全屏不会自动横屏，安卓全屏会根据视频尺寸自动进行横竖屏；

• 安卓物理键返回；

  使用document.fullscreen看是否可以监听到退出全屏操作；
  使用document添加fullscreenchange全屏监听，通过判断document.fullscreen查看是否退出全屏，物理返回导致的退出全屏也会触发此监听；      
  

document.addEventListener('fullscreenchange', () => {
    // 物理返回退出全屏情况处理
    if (!document.fullscreen) {
        this.isFullscreen = !document.fullscreen;
        this.handleFullscreen();
    }
});