Vue项目中监听全屏事件,实现全屏功能和按esc退出全屏(解决全屏踩坑难题)

Posted 1024_Byte

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue项目中监听全屏事件,实现全屏功能和按esc退出全屏(解决全屏踩坑难题)相关的知识,希望对你有一定的参考价值。

展示效果:

全屏功能

代码:

      <el-button
                  type="button"
                  id="full-btn-medium"
                  @click="VideoFullScreen"
                  size="medium"
                  title="全屏显示"
                >
                  全屏
       </el-button
   VideoFullScreen() 
   // 获取要全屏的组件节点
      var element = this.$refs["mediaPlayers"].$el;
   // 异步发起全屏请求 适配多浏览器全屏事件 为火狐 谷歌 ie safari
   // requestFullscreen() 方法用于发出异步请求使元素进入全屏模式 但并不保证元素一定能够进入全屏模式
   // 因此需要进行适配多方法
      var requestMethod =
        element.requestFullScreen ||
        element.webkitRequestFullScreen ||
        element.mozRequestFullScreen ||
        element.msRequestFullScreen;
      if (requestMethod) 
      // 如果全屏请求通过需要改变返回的fullscreenchange事件失效,因此重新指向this
        requestMethod.call(element);
       else if (typeof window.ActiveXObject !== "undefined")  // 这里本意是对ie的全屏活动做适配
       // 调用ie游览器工具
        var wscript = new ActiveXObject("WScript.Shell");
        // 如果本地程序不存在,则对ie执行F11全屏事件
        if (wscript !== null) 
          wscript.SendKeys("F11");
        
      

    ,

全屏后类名

全屏事件会改变元素的宽高 因此未需要提供修改样式的伙伴提供全屏伪类

  		:-webkit-full-screen 
          /* properties */
        
 
        :-moz-full-screen 
          /* properties */
        
 
        :-ms-fullscreen 
          /* properties */
        
 
        :full-screen  /*pre-spec */
          /* properties */
        
 
        :fullscreen  /* spec */
          /* properties */
        

退出全屏事件

exitFullscreen() 
// 同样的思路
var element = this.$refs["mediaPlayers"].$el;
  if (element .exitFullscreen) 
    element .exitFullscreen();
   else if (element .msExitFullscreen) 
    element .msExitFullscreen();
   else if (document.mozCancelFullScreen) 
    element .mozCancelFullScreen();
   else if (document.webkitExitFullscreen) 
    element .webkitExitFullscreen();
  


用户手动按下ESC键或F11键,也可以退出全屏键。此外,加载新的页面,或者切换tab,或者从浏览器转向其他应用(按下Alt-Tab),也会导致退出全屏状态。

fullscreenchange事件

全屏事件结束后可能会出现样式错乱情况:我们可以见监听fullscreenchange事件来解决
fullscreenchange:当浏览器进入或离开全屏时触发。
同时:requestFullScreen方法执行后也会返回fullscreenchange事件

// 
    document.addEventListener("fullscreenchange", () => 
      if (that.isFullScren) 
        this.$nextTick(() => 
     // 这里对全屏后样式进行操作
        );
      
      that.isFullScren = !that.isFullScren;
    );

判断是否全屏

但是有可能监听不到全屏事件改变
我们可以使用fullscreenEnabled 来判断是否进入全屏

var fullscreenEnabled =
  document.fullscreenEnabled ||
  document.mozFullScreenEnabled ||
  document.webkitFullscreenEnabled ||
  document.msFullscreenEnabled;

if (fullscreenEnabled) 
  videoElement.requestFullScreen();
 else 
  console.log('浏览器当前不能全屏');

PS:Failed to execute ‘requestFullscreen’ on ‘Element’: API can only be initiated by a user gesture.
如果控制台出现了以上提示
在"Element"上执行"requestFullscreen"方法失败,javascript API仅允许通过手势去创建!(即没有权限)
大多数是希望在浏览器在自启动之后就自动触发全屏模式。浏览器阻止了这类行为因此需要寻找它方式实现。

全屏的两种状态

requestFullscreen 全屏API

浏览器F11全屏

由此很明显地发现浏览器自带的全屏行为只是把任务栏顶部隐藏
而requestFullscreen 将需要全屏的dom元素给全屏了
因此再出现某些关于F11全屏的问题时可以通过isFullscreen这个方法在判断他的布尔值

        function isFullscreen()
            return document.fullscreenElement    ||
                   document.msFullscreenElement  ||
                   document.mozFullScreenElement ||
                   document.webkitFullscreenElement || false;
        

全屏则返回当前调用全屏的元素,不全屏返回false

以上是关于Vue项目中监听全屏事件,实现全屏功能和按esc退出全屏(解决全屏踩坑难题)的主要内容,如果未能解决你的问题,请参考以下文章

Vue项目中监听全屏事件,实现全屏功能和按esc退出全屏(解决全屏踩坑难题)

vue中实现浏览器全屏与退出全屏功能

js指定元素全屏并监听退出全屏

点击按钮全屏,按esc退出全屏

vue中如何实现全全全屏和退出全屏?

screenfull.js全屏状态监听