Question

我正在使用slider.io构建视频库，我希望如果用户转到下一张幻灯片/视频，视频会暂停。我尝试使用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中幻灯片上的视频

2 个答案: