换一种videoList的遍历方式<script> import fs from 'fs' import path from 'path' export default { name: 'FullScreenVideoPlayer', data() { return { currentVideoIndex: 0, // 当前播放的视频索引 videoList: [], // 视频列表 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) // 读取本地文件夹中的视频文件 const videoFolderPath = path.join(__dirname, './src/video/') fs.readdir(videoFolderPath, (err, files) => { if (err) { console.error(err) } else { this.videoList = files.filter(file => { return path.extname(file).toLowerCase() === '.mp4' }).map(file => { return { src: `./src/video/${file}`, name: file } }) } }) }, 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>

这段代码是一个Vue组件，用于全屏播放本地视频文件夹中的MP4视频文件。其中，videoList数组存储了所有的视频文件信息，currentVideoIndex表示当前播放的视频索引，currentVideoSrc是根据当前索引获取的当前视频源地址。在mounted钩子函数中，使用Node.js的fs模块读取本地视频文件夹中所有的MP4视频文件，并将视频信息存储到videoList数组中。在播放下一个视频时，会先将当前视频索引值加一，然后判断是否超出了视频列表的范围，如果超出了，则将索引值重置为0，最后根据当前索引获取当前视频源地址，并调用play()方法开始播放。toggleFullScreen()方法用于全屏切换。