解决：视频和图片混合在一起的轮播图

项目：使用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>