这个遍历后的路径要改哪些才能播放啊<template> <div class="video-container"> <video ref="videoPlayer" @ended="playNextVideo" @click="toggleFullScreen" controls></video> </div> </template> <script> import fs from 'fs'; export default { name: 'FullScreenVideoPlayer', data() { return { currentVideoIndex: 0, // 当前播放的视频索引 videoList: [], // 视频列表 autoplayInterval: null // 自动播放的定时器 } }, computed: { currentVideoSrc() { return this.videoList[this.currentVideoIndex] } }, mounted() { const video = this.$refs.videoPlayer; // 读取本地文件夹内的视频文件 fs.readdir('./src/video/', (err, files) => { if (err) throw err; // 过滤非视频文件 const videoFiles = files.filter(file => file.endsWith('.mp4') || file.endsWith('.avi')) // 将视频文件的路径存入 videoList 数组中 this.videoList = videoFiles.map(file => `./src/video/${file}`) // 自动播放 video.src = this.currentVideoSrc; video.play(); this.autoplayInterval = setInterval(() => { this.playNextVideo() }, 5000); }); video.addEventListener('ended', () => { this.playNextVideo() }); }, 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-03-20 13:39:41 浏览: 114
jQuery-video-视频播放
这段代码是一个Vue组件,用于播放本地文件夹内的视频文件。如果需要更改视频文件路径,可以修改以下代码:
```
fs.readdir('./src/video/', (err, files) => {
if (err) throw err;
// 过滤非视频文件
const videoFiles = files.filter(file => file.endsWith('.mp4') || file.endsWith('.avi'))
// 将视频文件的路径存入 videoList 数组中
this.videoList = videoFiles.map(file => `./src/video/${file}`)
// 自动播放
video.src = this.currentVideoSrc;
video.play();
this.autoplayInterval = setInterval(() => {
this.playNextVideo()
}, 5000);
});
```
其中,'./src/video/'是视频文件夹的路径,可以根据实际情况进行修改。
另外,如果需要更改视频文件格式,可以修改以下代码:
```
const videoFiles = files.filter(file => file.endsWith('.mp4') || file.endsWith('.avi'))
```
这里目前只支持.mp4和.avi格式的视频文件,如果需要支持其他格式的视频文件,可以在filter函数中添加对应的文件扩展名即可。
如果还有其他问题,请随时提出。
阅读全文