vue3下src下面有个video的文件夹,把这个文件夹里mp4格式的视频遍历到videolist里
时间: 2024-03-19 08:43:06 浏览: 65
可以使用如下代码实现:
```javascript
// 引入 fs 模块
const fs = require('fs')
// 视频文件夹路径
const videoDirPath = './src/video';
// 获取文件夹下所有的文件名
const fileNames = fs.readdirSync(videoDirPath);
// 过滤出所有 mp4 格式的文件名
const mp4FileNames = fileNames.filter(fileName => fileName.endsWith('.mp4'));
// 将 mp4 文件名拼接成带路径的 URL
const videoList = mp4FileNames.map(mp4FileName => {
return `${videoDirPath}/${mp4FileName}`;
});
console.log(videoList);
```
这段代码会输出一个数组,数组中包含了所有 mp4 文件的路径。你可以将这个数组传递给你的 Vue 组件,然后在页面中渲染出视频列表。
相关问题
vue3环境下,遍历videoList里面的内容为本地文件夹里的视频
你可以使用 Node.js 的 fs 模块读取本地文件夹内的视频文件,过滤出视频文件的路径,并将路径存入 videoList 数组中。然后在 mounted 钩子函数中,使用 video 标签的 src 属性来设置视频播放的路径,并调用 play 方法自动播放。这里是一个可能的实现:
```
<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>
```
vue3框架中如何在videoList遍历本地文件夹里的视频
在 Vue 3 中,你可以使用 JavaScript 中的 `fetch` 或者 `axios` 库来获取本地文件夹中的视频列表,然后将其展示在视频列表中。
以下是一个使用 `fetch` 获取本地视频列表的示例代码:
```javascript
<template>
<div>
<h2>视频列表</h2>
<ul>
<li v-for="video in videoList" :key="video.id">
<video :src="video.url" controls></video>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
videoList: [], // 存储视频列表
};
},
mounted() {
// 发起请求获取本地视频列表
fetch('http://localhost:3000/videos')
.then((response) => response.json())
.then((data) => {
// 数据获取成功,将数据存储到 videoList 中
this.videoList = data;
})
.catch((error) => console.error(error));
},
};
</script>
```
在上述代码中,我们使用 `fetch` 发起了一个 GET 请求,获取了本地服务器上的视频列表。获取到数据后,我们将其存储到 `videoList` 数组中,并使用 `v-for` 指令遍历 `videoList` 数组,将每个视频展示出来。
当然,你需要在本地服务器上搭建一个能够返回视频列表的接口。同时,需要注意的是,视频文件需要放在本地服务器的指定目录下。