当前位置：首页 > VUE

vue怎么实现视频全屏

2026-02-24 19:34:01VUE

Vue 中实现视频全屏的方法

使用 HTML5 Fullscreen API

通过调用原生 Fullscreen API 实现全屏控制，适用于现代浏览器：

// 获取视频元素
const videoElement = document.getElementById('video-player');

// 进入全屏
function requestFullscreen() {
  if (videoElement.requestFullscreen) {
    videoElement.requestFullscreen();
  } else if (videoElement.webkitRequestFullscreen) { /* Safari */
    videoElement.webkitRequestFullscreen();
  } else if (videoElement.msRequestFullscreen) { /* IE11 */
    videoElement.msRequestFullscreen();
  }
}

// 退出全屏
function exitFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) { /* Safari */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
  }
}

使用第三方库

安装 screenfull 库简化全屏操作：

npm install screenfull

在 Vue 组件中使用：

import screenfull from 'screenfull';

export default {
  methods: {
    toggleFullscreen() {
      const video = this.$refs.videoPlayer;
      if (screenfull.isEnabled) {
        screenfull.toggle(video);
      }
    }
  }
}

视频播放器组件集成

使用现成的视频播放器组件如 vue-video-player：

vue怎么实现视频全屏

npm install vue-video-player

配置全屏功能：

import { videoPlayer } from 'vue-video-player';

export default {
  components: {
    videoPlayer
  },
  data() {
    return {
      playerOptions: {
        autoplay: false,
        controls: true,
        sources: [{
          src: 'video-source.mp4',
          type: 'video/mp4'
        }],
        controlBar: {
          fullscreenToggle: true // 启用全屏按钮
        }
      }
    };
  }
};

自定义全屏按钮

在模板中添加自定义全屏控制按钮：

<template>
  <div>
    <video ref="videoPlayer" controls></video>
    <button @click="toggleFullscreen">全屏</button>
  </div>
</template>

响应式全屏状态

监听全屏状态变化：

vue怎么实现视频全屏

export default {
  mounted() {
    document.addEventListener('fullscreenchange', this.handleFullscreenChange);
  },
  beforeDestroy() {
    document.removeEventListener('fullscreenchange', this.handleFullscreenChange);
  },
  methods: {
    handleFullscreenChange() {
      this.isFullscreen = !!document.fullscreenElement;
    }
  }
};

CSS 全屏样式

添加全屏时的样式优化：

video:-webkit-full-screen {
  width: 100%;
  height: 100%;
}

移动端适配

针对移动设备添加特殊处理：

function isMobileDevice() {
  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}

function requestMobileFullscreen(video) {
  video.webkitEnterFullscreen();
}

全屏事件处理

处理全屏状态变化事件：

videoElement.addEventListener('enterfullscreen', () => {
  console.log('进入全屏');
});
videoElement.addEventListener('leavefullscreen', () => {
  console.log('退出全屏');
});