vue设置video标签全屏

你可以通过以下代码将 Vue 中的 `<video>` 标签设置为全屏：

<template>
  <div>
    <video ref="videoPlayer" controls>
      <source src="your-video-source" type="video/mp4">
    </video>
    <button @click="fullscreen">Fullscreen</button>
  </div>
</template>

<script>
export default {
  methods: {
    fullscreen() {
      const videoPlayer = this.$refs.videoPlayer;

      if (videoPlayer.requestFullscreen) {
        videoPlayer.requestFullscreen();
      } else if (videoPlayer.webkitRequestFullscreen) {
        videoPlayer.webkitRequestFullscreen();
      } else if (videoPlayer.mozRequestFullScreen) {
        videoPlayer.mozRequestFullScreen();
      } else if (videoPlayer.msRequestFullscreen) {
        videoPlayer.msRequestFullscreen();
      }
    }
  }
}
</script>

在上述代码中，我们首先在 `<video>` 标签中添加了一个 `controls` 属性来显示视频控制条，然后在 `methods` 中添加了一个 `fullscreen` 方法。当按钮被点击时，该方法将获取 `<video>` 元素的引用，然后通过四个不同的浏览器 API 来请求全屏。

请注意，为了使全屏功能正常工作，你需要在浏览器中启用全屏功能。