vue中使用swiper4 视频轮播,点击切换关闭上一个视频的声音
直接上代码 :给video动态绑定id
<swiper class="swiper-container" :options="videoSwiperOption">
<swiper-slide
class="swiper-item"
v-for="(item,index) in videoListData"
:key="item.id"
style="text-align: center"
>
<p class="fd" style="line-height: 30px;font-size:18px;">{{item.name}} </p>
<video controls class="videoName" :id="'my_player'+index">
<source :src="item.url" type="video/mp4" />
</video>
</swiper-slide>
<div class="swiper-button-prev" slot="button-prev">
</div>
<div class="swiper-button-next" slot="button-next">
</div>
</swiper>
data中 :在点击事件中循环停止video
videoSwiperOption: {
effect: "flip",
grabCursor: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
},
on: {
click: () => {
if (this.videoListData.length > 0) {
this.videoListData.forEach((item, index) => {
document.getElementById("my_player" + index).pause();
});
}
}
}
}