在幻灯片中暂停视频 slider.io

Question

我正在使用 slider.io 构建一个视频库，我希望视频在用户转到下一个 slide/video 时暂停。我正在尝试使用 onSlideChangeStart 和 onSlideChangeEnd 函数，但它不起作用。

代码：

var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            slidesPerView: 'auto',
            centeredSlides: true,
            paginationClickable: true,
            spaceBetween: 0,
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            loop: true,
            onSlideChangeStart: function (swiper) {
                $('.swiper-button-next').click(function () {
                    $('video')[0].pause();
                });


            },
            onSlideChangeEnd: function (swiper) {
                $('.swiper-button-next').click(function () {
                    $('video')[0].pause();
                });

            }
        });

Answer 1

onSlideChangeStart 和 onSlideChangeEnd 您可以检查 video 是否正在 next 或 prev 幻灯片中播放然后暂停它。

working fiddle

 onSlideChangeStart: function(swiper) {
    if ($('.swiper-slide-next video')[0]) $('.swiper-slide-next video')[0].pause();
    if ($('.swiper-slide-prev video')[0]) $('.swiper-slide-prev video')[0].pause();

  },
  onSlideChangeEnd: function(swiper) {
    if ($('.swiper-slide-next video')[0]) $('.swiper-slide-next video')[0].pause();
    if ($('.swiper-slide-prev video')[0]) $('.swiper-slide-prev video')[0].pause();
  },

Answer 2

I found a solution for this by using the below method


var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            slidesPerView: 'auto',
            centeredSlides: true,
            paginationClickable: true,
            spaceBetween: 0,
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            loop: true,
            onSlideChangeStart: function (swiper) {
                $('.swiper-slide').find('video').each(function() {
                    this.pause();
                });

            },
            onSlideChangeEnd: function (swiper) {
                $('.swiper-slide').find('video').each(function() {
                    this.pause();
                });

            }
        });

在幻灯片中暂停视频 slider.io

Pause video on slide in slider.io

javascript

jquery

swiper