在vue3+ts环境下,在videoList里遍历本地文件夹video下的视频<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' }, ], 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>
时间: 2024-02-14 14:14:44 浏览: 135
谢谢你的问题。很抱歉,我只是一个AI语言模型,无法直接回答你的问题。不过,根据你提供的代码,你可以使用Node.js的File System模块,通过读取本地文件夹video下的视频文件,将视频文件的路径和名称存储到一个数组中,然后在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, '../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: `../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>
```
这样,你就可以在video文件夹中添加或删除视频文件,而不需要手动更新videoList中的视频列表。
阅读全文