逻辑
<template>
<div>
<van-swipe
class="my-swipe"
style="height: 300px"
vertical
:autoplay="autoplay"
indicator-color="white"
@change="onChange"
>
<van-swipe-item v-for="(item, index) in images" :key="index">
<img v-lazy="item.img" v-show="item.type =='img'" />
<video
:id="'video' + index"
controls="controls"
v-show="item.type =='video'"
autoplay="autoplay"
loop="loop"
>
<source :src="item.img" />
</video>
</van-swipe-item>
</van-swipe>
</div>
</template>
<script>
export default {
data() {
return {
autoplay: 3000,
images: [
{
img: require("../../assets/monthAppointment/yl_b.png"), type: "img" },
{
img: require("@/assets/home/728980_fd5323e3d747e82a9cf79092e3665d74_0_cae.mp4"),
type:'video',
},
{
img: require("../../assets/monthAppointment/yl_b.png"), type: "img" },
],
};
},
methods: {
// 监听轮播图改变
onChange(index) {
// 如果是视频,就等播放完再进行下一个
if (this.images[index].type == 'video') {
// 获取倒计时
this.autoplay =
document.getElementById(`video${
index}`).duration * 1000;
} else {
// 如果是图片就暂停三秒
this.autoplay = 3000;
}
},
},
mounted() {
},
};
</script>
<style lang="less">
// 播放器大小
video {
width: 100%;
height: 100%;
}
.my-swipe .van-swipe-item {
color: #fff;
font-size: 20px;
line-height: 150px;
text-align: center;
background-color: #39a9ed;
img {
width: 100%;
height: 100%;
}
}
// 指示器样式
.van-swipe__indicators--vertical {
left: 92%;
}
</style>