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,跟使用效果图基本差不多

相关推荐
山登绝顶我为峰 3(^v^)32 小时前
如何录制带备注的演示文稿(LaTex Beamer + Pympress)
c++·线性代数·算法·计算机·密码学·音视频·latex
daols886 小时前
vue vxe-table 自适应列宽,根据内容自适应宽度的2种使用方式
vue.js·vxe-table
却道天凉_好个秋7 小时前
音视频学习(三十六):websocket协议总结
websocket·音视频
OEC小胖胖7 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水8 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
老虎06278 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台8 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
烛阴9 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
【余185381628009 小时前
碰一碰发视频源码搭建定制化开发:支持OEM
音视频
EQ-雪梨蛋花汤9 小时前
【Part 3 Unity VR眼镜端播放器开发与优化】第四节|高分辨率VR全景视频播放性能优化
unity·音视频·vr