for (OcsCourseVideo video : videos) { List<OcsCourseVideo> videoList = videoMap.get(video.getCourse().getId()); if (videoList == null) { videoList = new ArrayList<>(); videoMap.put(video.getCourse().getId(), videoList); // 只放默认第一个播放的视频 videoList.add(video); }else if ("T".equals(video.getPlayFirst())) { // 只放playFirst的视频 videoList.clear(); videoList.add(video); } }
时间: 2024-02-14 09:14:16 浏览: 169
这段代码的作用是遍历一个 `OcsCourseVideo` 类型的列表 `videos`,并将其按照 `courseId` 进行分组。对于同一个 `courseId`,只保留一个默认的视频,如果有 `playFirst` 为 "T" 的视频,则只保留这个视频。
具体来说,代码中使用了一个 `Map<Integer, List<OcsCourseVideo>>` 来存储分组后的视频,其中键为 `courseId`,值为该课程对应的视频列表。在遍历 `videos` 列表时,对于每个视频,首先从 `videoMap` 中获取对应课程的视频列表 `videoList`,如果该列表不存在,则创建一个新的列表,并将其添加到 `videoMap` 中。然后将当前视频添加到该列表中,如果当前视频的 `playFirst` 属性为 "T",则清空该列表并将当前视频添加进去,这样就保留了该课程中的默认视频和指定的 `playFirst` 视频。最后,遍历完成后,`videoMap` 中存储的就是按照 `courseId` 分组后的视频列表。
相关问题
fs的遍历文件夹方式运行的时候打不开,帮我修改一下,不用fs的遍历方式去遍历本地文件夹里的视频<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')); const videoList = videoFiles.map(file => './src/video' + file); this.videoList = videoList; 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>
可以使用 Node.js 内置的 `fs` 模块的同步方法 `readdirSync` 来遍历本地文件夹,修改后的代码如下:
```
<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;
const videoFiles = fs.readdirSync('./src/video');
const videoList = videoFiles.filter(file => file.endsWith('.mp4')).map(file => './src/video/' + file);
this.videoList = videoList;
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>
```
请注意,`readdirSync` 是同步方法,执行过程中会阻塞主线程,因此对于大文件夹或者需要实时响应的场景不太适用。如果要遍历大文件夹或者需要实时响应,可以使用 `readdir` 方法异步遍历,或者使用第三方的文件遍历库。
vue3环境下,videoList里遍历vscode2022 src下文件夹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>
这段代码是一个全屏视频播放器的 Vue 组件,使用了 HTML5 的 video 标签实现视频播放功能。在组件的 data 中定义了一个 videoList 数组,其中包含了要播放的视频的 src 属性。mounted 钩子函数中,使用 ref 获取到 video 标签实例,并添加了 ended 事件监听器,当视频播放完毕时,会调用 playNextVideo 方法切换到下一个视频进行播放。同时,使用 setInterval 实现了自动播放功能。在 beforeUnmount 钩子函数中,清除了定时器。toggleFullScreen 方法则实现了全屏切换功能。在组件的 template 中,使用 video 标签显示视频,并使用 controls 属性显示视频控制条。
阅读全文