Vue3视频播放铺满

### Vue3 中实现视频播放器全屏显示

为了实现在 Vue3 项目中的视频播放器全屏显示功能，可以基于 `vue-video-player` 或者其他类似的插件来完成。以下是具体的方法：

#### 使用 `vue-video-player`

如果选择使用 `vue-video-player` 来构建视频播放组件，则可以在初始化配置时加入对全屏的支持选项。

首先按照说明文档安装并引入该库[^1]：

npm install vue-video-player --save

接着在项目的入口文件 main.js 中注册此插件以便于全局调用:

import Vue from 'vue';
import VideoPlayer from 'vue-video-player';

Vue.use(VideoPlayer);

对于希望支持全屏特性的场景来说，在模板部分定义好容器之后还需要额外指定一些属性参数以激活相应行为。例如通过设置 options 属性里的 controls 和 fullscreen 参数为 true 即可开启控制条以及允许切换至全屏幕模式的功能[^2]:

<template>
  <video-player class="vjs-custom-skin"
                :options="playerOptions">
  </video-player>
</template>

<script setup>
const playerOptions = {
    playbackRates: [0.7, 1.0, 1.5, 2.0], // 可选播放速度
    autoplay: false,
    muted: false,
    loop: false,
    preload: 'auto',
    language: 'en',
    aspectRatio: '16:9', // 尝试保持给定纵横比
    fluid: true,         // 当true时，Video.js player将具有流体大小。换句话说，它会按比例缩放以适应其容器。
    sources: [{
      type: "video/mp4",
      src: "http://vjs.zencdn.net/v/oceans.mp4" // 替换成实际地址
    }],
    poster: "/static/images/your-poster.jpg",   // 视频封面图片路径
    notSupportedMessage: 'This browser does not support the video tag.',
    controlBar: {
        timeDivider: true,
        durationDisplay: true,
        remainingTimeDisplay: false,
        fullscreenToggle: true     // 显示全屏按钮
    },
    fullscreen:{enable:true}       // 启用全屏特性
}
</script>

另外一种方式则是利用更贴近底层 API 的操作——即直接监听 HTMLMediaElement 对象上的 requestFullscreen 方法来进行手动触发全屏效果[^3]。这种方式适用于那些想要更加灵活定制化处理逻辑的情况。

#### 手动请求全屏

当采用原生 JavaScript 控制媒体元素进入或退出全屏状态时，通常会在挂载阶段绑定事件处理器到目标 DOM 节点上，并在其内部封装相应的业务流程。下面是一个简单的例子展示如何结合 Composition API 实现这一目的:

// 假设已经有一个名为 refVideo 的响应式变量指向了 <video> 标签实例
import {ref, onMounted } from 'vue'

export default defineComponent({
  name:'MyVideoPlayer',
  
  setup(){
    
    const refVideo = ref(null)

    function toggleFullScreen() {
      if (!document.fullscreenElement && !document.mozFullScreenElement &&
          !document.webkitFullscreenElement) {

        let elem = document.documentElement;
        
        if (elem.requestFullscreen) {
            elem.requestFullscreen();
        } else if (elem.mozRequestFullScreen) { /* Firefox */
            elem.mozRequestFullScreen();
        } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
            elem.webkitRequestFullscreen();
        }
      } else {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.mozCancelFullScreen) { /* Firefox */
            document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
            document.webkitExitFullscreen();
        }
      }
      
    }

    onMounted(() => {
      console.log('component mounted');
      // 绑定点击事件或其他交互机制启动全屏转换过程...
      refVideo.value.addEventListener('click',toggleFullScreen)
    })

    return{
      refVideo
    }
  },

})

上述两种方案都可以有效地帮助开发者达成预期的效果，不过前者更为简便易用；而后者则提供了更大的灵活性供进一步开发人员自定义需求下的扩展应用。