vue實現(xiàn)視頻全屏切換功能

更新時間：2023年11月08日 15:08:25 作者：﹏????

這篇文章主要為大家詳細介紹了如何使用vue實現(xiàn)視頻全屏切換的功能,文中的示例代碼講解詳細, 具有一定的借鑒價值,有需要的小伙伴可以參考一下

最近項目開發(fā)中遇到一個視頻窗口全屏切換功能，為此在這里做個記錄。

具體的實現(xiàn)思路：

<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()) {
        // 非全屏狀態(tài)
        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>

這里需要監(jiān)聽ESC鍵，為此做了特殊處理，這里是Demo,跟使用效果圖基本差不多

知識補充

除了實現(xiàn)視頻全屏切換，vue還可以實現(xiàn)瀏覽器全屏以及退出全屏，下面是實現(xiàn)代碼，希望對大家有所幫助

在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實現(xiàn)視頻全屏切換功能的文章就介紹到這了,更多相關vue視頻全屏切換內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: