swiper中有视频时,滑动停止后视频停止播放

Posted sese

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了swiper中有视频时,滑动停止后视频停止播放相关的知识,希望对你有一定的参考价值。

我们经常能够看到在图片轮播中,穿插着视频的播放,如下图为淘宝的一个产品轮播图,放个视频能够让顾客对产品有个更全面的认识。

技术分享图片

我们可以用swiper实现这个功能。用法就跟放图片一样,只是这里把图片换成视频就可以了。

只是如果放的是视频的话,就有一个问题,就是我们怎么在滑动结束的时候,自动停止播放上一个视频呢?

我们可以利用 swiper 提供的 onSlideChangeEnd 方法来做到这种效果,具体代码如下:

$(".swiper-container").each(function () { //写each是用于一个页面出现多个轮播
        var _this = $(this);
        var videoList = $(this).find("video"); //找到轮播图下面的视频个数
        var space = $(this).data("space");
        var count = $(this).data("count") || 1;
        var swiperSetting = {};
        swiperSetting.pagination = ".swiper-pagination";
        swiperSetting.preloadImages = false;
        swiperSetting.lazyLoading = true;
        swiperSetting.loop = true;
        swiperSetting.spaceBetween = space;
        swiperSetting.slidesPerView = count;
        if (videoList.length) { 
            swiperSetting.autoplay = false; //如果有视频,禁止循环播放
            swiperSetting.onSlideChangeEnd = function (swiper) { //滚动停止后视频停止播放
                for (var i = 0; i < videoList.length; i++) {
                    videoList[i].pause();
                }
            }
        } else {
            swiperSetting.autoplay = 3000; //没视频时,每隔3秒播放
        }
        new Swiper(_this, swiperSetting); 
    });

 

O啦~~4不4超简单?~

以上是关于swiper中有视频时,滑动停止后视频停止播放的主要内容,如果未能解决你的问题,请参考以下文章

用 jquery 停止 youtube 视频?

微信小程序商城开发-商品详情轮播(图片,视频混合)

Vue中swiper手动滑动后不能自动播放的解决方法

Apple tv 音频停止

使用 Swiper 组件播放暂停问题反应原生多视频

单击链接 javascript 时停止所有播放 iframe 视频