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

最新推荐文章于 2024-10-05 23:15:10 发布

鲸渔

最新推荐文章于 2024-10-05 23:15:10 发布

阅读量370

点赞数

分类专栏：【精准打击】文章标签：音视频 vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_39078783/article/details/131174207

版权

【精准打击】专栏收录该内容

7 篇文章 1 订阅

订阅专栏

在浏览器全屏状态下，由于某些原因可能无法监听到keydown和keyup事件，导致ESC键无法退出全屏，特别是对于视频播放器。文章提供了一个使用resize事件来检测全屏状态变化的方法，当检测到非全屏状态时，可执行退出全屏操作，如视频播放器退出全屏。此解决方案适用于Vue2框架。

摘要由CSDN通过智能技术生成

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()) {
        // 执行退出全屏的操作 例如:视频播放器退出全屏
      }
    }
}