videojs 配合 Swiper 轮播 切换播放/暂停视频/播放后切换

JS

//新建videojs对象
var player = videojs('video', {
    muted: true,
    controls: true,
    // loop: true,
});

var mySwiper = new Swiper('.swiper-banner', {

    loop: true, // 循环模式选项

    // 如果需要分页器
    pagination: {
        el: '.swiper-pagination',
        clickable: true
    },
    on: {
        init: function() {
            swiperAnimateCache(this); //隐藏动画元素 
            swiperAnimate(this); //初始化完成开始动画
        },
        slideChangeTransitionEnd: function() {
            swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
            //this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次，去除ani类名
        }
    }
    
    // swiper从一个slide过渡到另一个slide时执行:停止视频播放
    onSlideChangeStart: function(swiper){
        player.pause();
    }
    //视频播放时轮播图停止
    player.on('play',function(){
        // console.log(mySwiper)
        mySwiper.stopAutoplay()
    });
    // 视频暂停时轮播图继续
    player.on('pause',function(){
        mySwiper.startAutoplay()
    });

})