vue-video-player实现全屏

Vue Video Player 是一个基于 Vue.js 的开源视频播放器组件，它集成了 video.js，支持自定义皮肤和选项。

在 Vue Video Player 中实现全屏功能的方法如下：

1. 使用全屏 API

在 Vue Video Player 组件中，可以使用 HTML5 的全屏 API，它可以将视频全屏显示。

使用全屏 API 的方法是：当用户点击全屏按钮时，调用 Element.requestFullScreen() 方法，此方法可以将当前页面全屏显示。

当用户退出全屏模式时，调用 document.exitFullScreen() 方法，此方法可以退出全屏模式。

需要注意的是，全屏 API 不是所有浏览器都支持，所以需要在使用前进行兼容性检测。

2. 使用 Video.js 的全屏插件

Vue Video Player 中集成了 video.js，可以使用其全屏插件 videojs-fullscreen 实现全屏功能。

使用全屏插件的方法是：

1）首先，在顶部导入 video.js 和 videojs-fullscreen 的样式和脚本文件：

import 'video.js/dist/video-js.css';
import 'videojs-fullscreen/dist/videojs.fullscreen.css';
import videojs from 'video.js/dist/video.min.js';
import fullscreen from 'videojs-fullscreen/dist/videojs.fullscreen.js';

2）在 Vue Video Player 的 mounted 生命周期钩子中，注册视频全屏插件：

export default {
name: 'VueVideoPlayer',
data() {
return { player: null };
},
mounted() {
this.player = videojs(this.$refs.videoPlayer, this.options, () => {
this.player.ready(() => {
this.player.fullscreen({
enterOnRotate: true,
alwaysInLandscapeMode: true
});
});
});
}
}

3）然后，在模板中添加全屏按钮：

<button class="vjs-fullscreen-control vjs-control vjs-button" type="button" aria-disabled="false" title="Fullscreen"></button>

4）最后，当用户点击全屏按钮时，调用全屏插件的 enterFullScreen() 方法，此方法可以将视频全屏显示。

需要注意的是，不同浏览器对全屏 API 的实现方式有所不同，所以在使用全屏插件时需要进行兼容性检测。