vue 视频播放全屏播放

在Vue中实现视频全屏播放可以使用HTML5的全屏API，以下是一个示例代码：

<template>
 <div>
    <video ref="videoPlayer" @click="toggleFullScreen" controls>
      <source src="your_video_source" type="video/mp4">
    </video>
  </div>
</template>

<script>
export default {
  mounted() {
    this.videoPlayer = this.$refs.videoPlayer;
  },
  methods: {
    toggleFullScreen() {
      if (this.videoPlayer.requestFullscreen) {
        this.videoPlayer.requestFullscreen();
      } else if (this.videoPlayer.mozRequestFullScreen) { // Firefox
        this.videoPlayer.mozRequestFullScreen();
      } else if (this.videoPlayer.webkitRequestFullscreen) { // Chrome, Safari and Opera
        this.videoPlayer.webkitRequestFullscreen();
      } else if (this.videoPlayer.msRequestFullscreen) { // IE/Edge
        this.videoPlayer.msRequestFullscreen();
      }
    },
  },
};
</script>

上述代码中，我们首先在`<video>`标签中添加了一个`controls`属性，这样会出现视频播放器的控制条。然后在`mounted()`中将`<video>`元素赋值给`this.videoPlayer`，方便后续调用全屏API。接着，在点击事件`@click`绑定的方法`toggleFullScreen`中判断浏览器支持的全屏API，并调用对应的方法请求全屏。

记得将 `your_video_source` 替换为你自己的视频源。此外，还要确保浏览器允许通过JavaScript请求全屏，否则可能会无法正常全屏播放。