脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue视频全屏切换

vue实现视频全屏切换功能

 更新时间：2023年11月08日 15:08:25   作者：﹏ℳ๓₯㎕  
这篇文章主要为大家详细介绍了如何使用vue实现视频全屏切换的功能,文中的示例代码讲解详细, 具有一定的借鉴价值,有需要的小伙伴可以参考一下

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

具体的实现思路：

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

知识补充

除了实现视频全屏切换，vue还可以实现浏览器全屏以及退出全屏，下面是实现代码，希望对大家有所帮助

在src/utils/util.js中加入下面代码块

import Vue from 'vue'
const util = Vue.prototype.util = {}
// 切换全屏
util.fullScreen = function (element) {
    element = element || document.body;
    if (element.requestFullscreen) {
        element.requestFullscreen();
    } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
    } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
    } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
    }
}

// 退出全屏
util.exitFullscreen = function () {
    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    }
}
export {
    util
}

2.在页面中使用全屏/退出全屏

<template>
	<div class="header">
         <!-- 全屏 -->
         <a v-if="fullScreenFlag" href="javascript:;" rel="external nofollow"  rel="external nofollow"  class="iconfont iconquanping" title="全屏" @click="fullScreen()"></a>
         <!-- 退出全屏 -->
         <a v-else href="javascript:;" rel="external nofollow"  rel="external nofollow"  class="iconfont icontuichuquanping1" title="退出全屏" @click="exitFullScreen()"></a>
	</div>
</template>
<script>
export default {
	data () {
		return {
            fullScreenFlag: true,
		};
    },
	methods: {
        // 全屏
        fullScreen(){
            this.fullScreenFlag = false;
            this.util.fullScreen();
        },
        // 退出全屏
        exitFullScreen() {
            this.fullScreenFlag = true;
            this.util.exitFullscreen();
        },
    },
};
</script>

到此这篇关于vue实现视频全屏切换功能的文章就介绍到这了,更多相关vue视频全屏切换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论