帮我修改一下代码，在vue3环境下，视频依次播放，播放完最后一个视频的时候重新从第一个视频开始播放<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>

这段代码已经可以实现视频依次播放，播放完最后一个视频的时候重新从第一个视频开始播放的效果。如果你想要修改代码，可以根据具体需求进行调整。比如，如果想要增加视频播放的速度，可以将autoplayInterval的时间间隔调小；如果想要增加视频的数量，可以在videoList中添加更多的视频路径。不过一定要注意视频路径的正确性，确保视频可以正常播放。