Swiper Slider 将在弹出后开始播放视频答案

【问题标题】：Swiper Slider will start video playing after popupSwiper Slider 将在弹出后开始播放视频
【发布时间】：2018-06-08 08:15:41
【问题描述】：

我正在使用 swiper.js 和 fancybox v3 创建一个弹出式画廊。其中一张幻灯片包含一个视频，但是在我单击并打开弹出窗口后，视频将加载并开始播放我降落的任何幻灯片。我尝试使用任何事件来停止暂停视频，但它仍然无法正常工作。谁有解决方案？

这是一个代码笔示例：

$(document).ready(function () {
    var mySwiper = new Swiper('.swiper-container', {
        init: false,
        pagination: {
            el: '.swiper-pagination',
            observer: true,
            observeParents: true,
            on: {
                slideChangeTransitionStart: function () {
                    $('.swiper-slide').find('video').each(function () {
                        console.log(this);
                        this.pause();
                    });
                },
                slideChangeTransitionEnd: function () {
                    $('.swiper-slide').find('video').each(function () {
                        this.pause();
                    });
                }
            }
        },
    })
    $('.fancybox-trigger').click(function (e) {
        e.preventDefault();
        var thisTarget = $(this).data('index');
        $.fancybox.open({
            src: "#lightbox",
            type: 'inline',
            opts: {
                toolbar: false,
                defaultType: 'inline',
                autoFocus: true,
                touch: false,
                afterLoad: function () {
                    mySwiper.init();
                    mySwiper.slideTo(thisTarget - 1)
                    $('swiper-slide').find('video').each(function () {
                        this.pause();
                    })
                }
            }
        })
    })
});

https://codepen.io/anon/pen/mKOwag?editors=0010

【问题讨论】：

第一个问题——为什么要用fancybox来显示swiper？这完全没有意义，fancybox 已经提供了滑动功能并且还支持视频。您是否缺少某些功能？
是的，事实上我想做这样的事情：idangero.us/swiper/demos/300-thumbs-gallery.html，在弹出窗口中。我刚刚删除了拇指滑块以简化示例，因为它不会影响大部分问题。
有可能得到类似codepen.io/fancyapps/pen/GxBpYY但不一样的东西。

标签： popup html5-video swiper autoplay fancybox-3

【解决方案1】：

我不是 swiper 专家，因此我无法解释原因，但我发现如果您像这样添加回调，回调会起作用：

mySwiper.on('slideChange', function() { 

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

});

演示 - https://codepen.io/anon/pen/ERNogR

【讨论】：

首先感谢您的回复。事实上，我之前已经尝试过这个事件，但问题是它只能在幻灯片发生变化时暂停。当我尝试单击第一个拇指时（例如），弹出窗口和滑块将在第一张幻灯片中打开，但视频仍将在后面播放（您仍然可以听到视频的音频）。
您必须先隐藏视频元素才能在打开第一张幻灯片时禁用自动启动。