今天在做网站开发时，客户想实现这么一个效果：在视频切换时，让当前的视频自动播放，其他视频加到初始状态。

在经过不过的实践和研究，最终实现了这个效果，分享一下代码，或许对大家有帮助

html代码如下：

<div class=”ywvideolist”>
<div class=”swiper-wrapper”>
<div class=”swiper-slide”><video class=”elementor-video” src=”视频地址” loop=”” preload=”metadata” muted=”muted” controlslist=”nodownload” poster=”封面图”></video></div>
<div class=”swiper-slide”><video class=”elementor-video” src=”视频地址” loop=”” preload=”metadata” muted=”muted” controlslist=”nodownload” poster=”封面图”></video></div>
<div class=”swiper-slide”><video class=”elementor-video” src=”视频地址” loop=”” preload=”metadata” muted=”muted” controlslist=”nodownload” poster=”封面图”></video></div>
</div>
</div>

Swiper代码如下：

if($(“.ywvideolist”).length > 0){
var ywvideolist = new Swiper(‘.ywvideolist’, {
loop: true,
initialSlide: 0,
spaceBetween: 16,
slidesPerView: “auto”,
speed: 800,
centeredSlides: true,
observer: !1,
observeParents: !0,
navigation: {
prevEl: ‘.ywvideobtnprve’,
nextEl: ‘.ywvideobtnnext’,
},
on: {
slideChangeTransitionStart: function() {
videoautoplay()
},
slideChange: function() {
videoautoplay();
},

}
});

}

js代码如下：

function videoautoplay(){

var videoitem = $(‘.ywvideolist .swiper-slide’);
videoitem.each(function(){
if( $(this).hasClass(‘swiper-slide-active’) ){
$(this).find(‘video’)[0].play();
}else{
$(this).find(‘video’)[0].load();
}
})

}

实现的效果如下图：