在光滑的轮播中为视频添加自动播放

Question

我在我的页面上使用光滑的轮播http://kenwheeler.github.io/slick/,现在我需要在其中添加带自动播放的视频.
我使用这段代码
HTML

<div class="main-slider" id="main-slider">
            <div>
                <div class="video-wrapper">
                    <video autoplay loop class="pageBackground-video">
                        <source src="/Content/video/332145276.mp4" type="video/mp4">
                    </video>
                </div>
            </div>
            <div>
                <div class="video-wrapper">
                    <video autoplay loop class="pageBackground-video">
                        <source src="/Content/video/332145276.mp4" type="video/mp4">
                    </video>
                </div>
            </div>          
        </div>

和脚本

$('#main-slider').slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      autoplay: true,
      autoplaySpeed: 30000,
      dots: true,
      infinite: true,
      adaptiveHeight: true,
      arrows: false
  });

但是自动播放不起作用.有没有办法让自动播放工作？

我尝试使用upd

$('#main-slider').on('afterChange', function(event, slick, currentSlide, nextSlide){
  var video = currentSlide.children('video').get(0).play();
});

但我得到一个错误,Uncaught TypeError: currentSlide.children is not a function因为currentSlide它只是一个数字(0,1等).如何获得当前元素？

upd2我使用这个代码,它的工作原理

$('#main-slider').on('afterChange', function(event, slick, currentSlide, nextSlide){
    $('#main-slider .slick-slide').find('video').get(0).pause();
    var video = $('#main-slider .slick-active').find('video').get(0).play();
});

但现在自动播放完全适用于所有视频,但只有在第一次光滑变化后才能完成.如何在仅加载页面后使其适用于第一个视频.

upd3我用过这段代码

 var video = $('#main-slider .slick-active').find('video').get(0).play();

  $('#main-slider').on('afterChange', function(event, slick, currentSlide, nextSlide){
    $('#main-slider .slick-slide').find('video').get(0).pause();
    var video = $('#main-slider .slick-active').find('video').get(0).play();
});

现在所有的工作都按照我的要求进行,但我担心我的代码很难看(

Answer 1

这行代码

$('#main-slider .slick-slide').find('video').get(0).pause();

afterChange 回调函数内部将暂停幻灯片容器中存在的所有视频，无论视频是否正在播放。

如果有 100 张幻灯片，则会暂停所有 100 个视频，尽管它们并未播放。最好找到上一张幻灯片并仅暂停该幻灯片中的视频