swiper视频切换
发布时间 2023-04-18 12:04:31作者: 米苏情怀
<script>
var interleaveOffset = .85;
var autoPlaySpeed = 4000;
var swiper = new Swiper(".main-visual-slider .swiper-container", {
autoplay : true,
loop: true,
speed: 1200,
parallax: false,
draggable: false,
autoplay: {
delay: autoPlaySpeed,
disableOnInteraction: false
},
allowTouchMove: true,
watchSlidesProgress: true,
// pagination :{
// el: '.swiper-pagination',
// clickable :true,
// },
navigation: {
nextEl: '.miso-next1',
prevEl: '.miso-prev1',
},
on: {
slideChangeTransitionStart : function(swiper){
// 判断swiper-slide-active是否有视频
if($(".main-visual-slider .swiper-slide-active video").length>0){
// 停止自动切换
swiper.autoplay.stop();
// 动态增加id
setTimeout(function(){
swiper.autoplay.stop();
$(".main-visual-slider .swiper-slide-active video").attr("id","video_01");
var _video=document.getElementById("video_01");
// 播放视频
_video.play();
// 切换后重新播放视频
_video.currentTime = 0;
// 静音
_video.volume = 0;
// 监听视频播放结束
_video.addEventListener('ended', function () {
swiper.slideNext();
//重新开始轮播banner
swiper.autoplay.start();
});
}, 10);
}
},
slideChangeTransitionEnd: function(swiper){
//动态移除id
setTimeout(function(){
$(".main-visual-slider .swiper-slide-active video").attr("id","");
}, 10);
},
}
});
</script>