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>

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
}

<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>