esc退出全屏,视频播放器没有缩小

esc退出全屏,没有监听到keydown , keyup事件

esc退出全屏,视频播放器没有缩小

以上问题都是因为在浏览器全屏后,按esc 页面内没有见听到键盘事件的原因,在这里我们可以通过监听resize事件即可

直接上代码,以vue2为例

methods: { 
 checkFull () {
      let isFull = document.mozFullScreen ||
          document.fullScreen ||
          document.webkitIsFullScreen ||
          document.webkitRequestFullScreen ||
          document.mozRequestFullScreen ||
          document.msFullscreenEnabled
      if (isFull === undefined) {
        isFull = false
      }
      return isFull
    }
},
mounted () {
    const that = this
    window.onresize = function () {
      if (!that.checkFull()) {
        // 执行退出全屏的操作 例如:视频播放器退出全屏
      }
    }
}