在vue3的环境下修改下面代码，使他运行时全屏自动播放<template> <div> <video ref="videoPlayer" @ended="playNextVideo"> <source :src="currentVideoSrc" type="video/mp4"> </video> </div> </template> <script> export default { data() { return { currentVideoIndex: 0, // 当前播放的视频索引 videoList: [ // 视频列表 { src: '/src/video/666.mp4' }, { src: '/src/video/777.mp4' }, { src: '' } ], autoplayInterval: null // 自动播放的定时器 } }, computed: { currentVideoSrc() { return this.videoList[this.currentVideoIndex].src } }, mounted() { this.$refs.videoPlayer.play() // 自动播放 this.autoplayInterval = setInterval(() => { this.playNextVideo() }, 5000) }, beforeUnmount() { // 清除定时器 clearInterval(this.autoplayInterval) }, methods: { playNextVideo() { this.currentVideoIndex++ if (this.currentVideoIndex >= this.videoList.length) { this.currentVideoIndex = 0 } this.$refs.videoPlayer.src = this.currentVideoSrc this.$refs.videoPlayer.play() } } } </script>

为了实现全屏自动播放，您需要在Vue3组件中使用全屏API并将其与视频播放器一起使用。下面是修改后的示例代码：

<template>
  <div class="video-container">
    <video ref="videoPlayer" @ended="playNextVideo" @click="toggleFullScreen" controls></video>
  </div>
</template>

<script>
export default {
  name: 'FullScreenVideoPlayer',
  data() {
    return {
      currentVideoIndex: 0, // 当前播放的视频索引
      videoList: [ // 视频列表
        {
          src: '/src/video/666.mp4'
        },
        {
          src: '/src/video/777.mp4'
        },
        {
          src: ''
        }
      ],
      autoplayInterval: null // 自动播放的定时器
    }
  },
  computed: {
    currentVideoSrc() {
      return this.videoList[this.currentVideoIndex].src
    }
  },
  mounted() {
    const video = this.$refs.videoPlayer

    video.addEventListener('ended', () => {
      this.playNextVideo()
    })

    // 自动播放
    video.play()
    this.autoplayInterval = setInterval(() => {
      this.playNextVideo()
    }, 5000)
  },
  beforeUnmount() {
    // 清除定时器
    clearInterval(this.autoplayInterval)
  },
  methods: {
    playNextVideo() {
      const video = this.$refs.videoPlayer

      this.currentVideoIndex++
      if (this.currentVideoIndex >= this.videoList.length) {
        this.currentVideoIndex = 0
      }

      video.src = this.currentVideoSrc
      video.play()
    },
    toggleFullScreen() {
      const video = this.$refs.videoPlayer

      if (document.fullscreenElement) {
        document.exitFullscreen()
      } else {
        video.requestFullscreen()
      }
    }
  }
}
</script>

<style scoped>
.video-container {
  width: 100%;
  height: 100%;
}

video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
</style>

在这个组件中，我们使用了视频播放器标签`<video>`和全屏API`requestFullscreen()`和`exitFullscreen()`。当点击视频时，`toggleFullScreen()`方法将检查当前是否在全屏模式下，并相应地进入或退出全屏模式。我们还在组件的`mounted()`生命周期中添加了一个`ended`事件侦听器，以便在视频播放完毕时自动重新开始播放。最后，我们将组件的样式设置为100％宽度和高度，以确保视频全屏显示。