<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')) // 将视频文件的路径存入 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() }); }, beforeUnmounted() { // 清除定时器 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 10:45:20 浏览: 23
视频播放的路径在这段代码中进行修改:
```
// 将视频文件的路径存入 videoList 数组中
this.videoList = videoFiles.map(file => './src/video/' + file)
```
这里将视频文件的路径存入了 videoList 数组中,并且在路径前加上了 `./src/video/`。如果你想要修改视频文件夹的路径,只需要修改这个字符串即可。如果你想要修改视频文件的后缀名,只需要修改 `file.endsWith('.mp4')` 中的 `mp4` 即可。
相关问题
我想在vue3环境下在videoList遍历本地文件夹里的视频,帮我修改一下以下代码<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>
你可以使用 Node.js 的 fs 模块来读取本地文件夹内的视频文件,然后将视频文件的路径存入 videoList 数组中。具体实现代码如下:
```
<template>
<div class="video-container">
<video ref="videoPlayer" @ended="playNextVideo" @click="toggleFullScreen" controls></video>
</div>
</template>
<script>
const fs = require('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('/path/to/folder', (err, files) => {
if (err) throw err;
// 过滤非视频文件
const videoFiles = files.filter(file => file.endsWith('.mp4') || file.endsWith('.avi'))
// 将视频文件的路径存入 videoList 数组中
this.videoList = videoFiles.map(file => `/path/to/folder/${file}`)
// 自动播放
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>
```
请将 `/path/to/folder` 替换为实际视频文件夹的路径。
vue3下src下面有个video的文件夹,把这个文件夹里mp4格式的视频遍历到videoList里<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>
你可以使用之前代码中获取视频列表的方法,将获取到的视频路径动态添加到 `videoList` 数组中。修改后的代码如下:
```html
<template>
<div class="video-container">
<video ref="videoPlayer" @ended="playNextVideo" @click="toggleFullScreen" controls></video>
</div>
</template>
<script>
// 引入 fs 模块
const fs = require('fs');
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()
});
// 获取视频列表
const videoDirPath = './src/video';
const fileNames = fs.readdirSync(videoDirPath);
const mp4FileNames = fileNames.filter(fileName => fileName.endsWith('.mp4'));
this.videoList = mp4FileNames.map(mp4FileName => {
return {
src: `${videoDirPath}/${mp4FileName}`
};
});
// 自动播放
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>
```
这样就可以将视频列表动态遍历到 `videoList` 数组中,然后在页面中渲染出视频列表。