项目:使用electron框架 element-ui VUE
项目需求:需要按照顺序播放指定文件夹中的视频和照片资源
解决思路:
- 使用element-ui中的走马灯carousel组件实现轮播图
- 然后通过判断资源是图片还是视频通过 v-if 和 v-else 进行切换 video 或者 img 标签 前
端页面部分代码:
<template>
<el-carousel ref="carousel" :autoplay="autoplay" direction="vertical" :interval="interval" @change="onChange">
<el-carousel-item v-for="(item,index) in bannerlist" :key="index">
<video controls v-if="isvideo" autoplay="autoplay" :controls="false" @ended="onVideoEnded(index)">
<source :src="item" type="video/mp4">
</video>
<img :src="item" v-else style="width: 100vw;height: 100vh;"/>
<h1>{{ item }}</h1>
</el-carousel-item>
</el-carousel>
</template>
JS部分代码:
<script setup>
import { onMounted, ref } from 'vue';
const autoplay = ref(true); //自动播放
const interval = ref(5000); //自动切换的时长
const bannerlist = ref(null);
const isvideo = ref(false);
const carousel = ref(null);
// 下述的banner是bannerlist的内容,只是用来展示看数据格式 不参与代码运行
const banner = ref([
"banner/01.mp4",
"banner/01.png",
"banner/02.png",
"banner/03.png",
"banner/04.png",
"banner/05.mp4",
"banner/06.png"
]);
// 用来加载文件夹内容 使用electron的fs模块
onMounted(async () => {
const files = await window.ipcRenderer.getbanner("_dirname../../banner");
bannerlist.value = files.map(item => {
return 'banner/' + item;
})
console.log("bannerlist.value:", bannerlist.value);
onChange(0); // 首次调用轮播图播放 避免防止第一个资源是视频而不能展示
});
// 当轮播图发生变化时触发
const onChange = (index) => {
let filetype = bannerlist.value[index].substring(bannerlist.value[index].lastIndexOf('.') + 1);
console.log("filetype :", filetype);
if (filetype == 'jpg' || filetype == 'png') {
isvideo.value = false;
autoplay.value = true;
}else if(filetype == 'mp4'){
isvideo.value = true;
autoplay.value = false;
}
};
// 视频播放结束触发
const onVideoEnded = (index) => {
console.log('视频播放结束',index);
autoplay.value = true;
next()
}
// 下一张ppt,因为视频结束后还会进行时长间隔的等待
const next = () =>{
console.log('下一张')
carousel.value.next();
}
</script>