vue如何实现视频全屏切换

最近项目开发中遇到一个视频窗口全屏切换功能,为此在这里做个记录。

具体的实现思路:

javascript 复制代码
<template>
  <div class="content-box">
    <div class="container">
      <div id="screen" class="screen">
        <el-button @click="screen()">
          {{ fullscreen ? "还原" : "最大化" }}
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fullscreen: false,
    };
  },
  mounted() {
    window.addEventListener("resize", ()=> {
      if (!this.isFullScreen()) {
        // 非全屏状态
        this.fullscreen = false;
      }
    });
  },
  methods: {
    //判断是否全屏
    isFullScreen() {
      return !!(document.webkitIsFullScreen || this.fullele());
    },
    fullele() {
      return (
        document.fullscreenElement ||
        document.webkitFullscreenElement ||
        document.msFullscreenElement ||
        document.mozFullScreenElement ||
        null
      );
    },
    screen() {
      let element = document.getElementById("screen");
      if (this.fullscreen) {
        // 关闭全屏
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        // 全屏
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen();
        }
      }
      this.fullscreen = !this.fullscreen;
    },
  },
};
</script>

<style lang="scss" scoped>
.screen {
  width: 500px;
  height: 500px;
  background-color: #fff;
  border: 1px solid red;
}
</style>

这里需要监听ESC键,为此做了特殊处理,这里是Demo,跟使用效果图基本差不多

相关推荐
EveryPossible几秒前
静态箭头连线
开发语言·javascript·ecmascript
伍哥的传说2 分钟前
QRCode React 完全指南:现代化二维码生成解决方案
前端·javascript·react.js·qrcode.react·react二维码生成·qrcodesvg·qrcodecanvas
listhi52010 分钟前
Map对象在JavaScript循环中的使用
开发语言·前端·javascript
小熊学Java11 分钟前
基于 Spring Boot+Vue 的高校竞赛管理平台
vue.js·spring boot·后端
百思可瑞教育4 小时前
uni-app 根据用户不同身份显示不同的tabBar
vue.js·uni-app·北京百思可瑞教育·北京百思教育
雾恋8 小时前
最近一年的感悟
前端·javascript·程序员
华仔啊8 小时前
Vue3 的 ref 和 reactive 到底用哪个?90% 的开发者都选错了
javascript·vue.js
A黄俊辉A9 小时前
axios+ts封装
开发语言·前端·javascript
一条数据库9 小时前
南京方言数据集|300小时高质量自然对话音频|专业录音棚采集|方言语音识别模型训练|情感计算研究|方言保护文化遗产数字化|语音情感识别|方言对话系统开发
人工智能·音视频·语音识别
小李小李不讲道理9 小时前
「Ant Design 组件库探索」四:Input组件
前端·javascript·react.js