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

我在页面上使用了光滑的轮播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
  });

但是自动播放不起作用。有什么办法可以使自动播放工作？

更新了
我尝试使用

$('#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();
});

现在一切都可以按我的意愿工作，但是我的代码很丑陋(

最佳答案

您可以使用光滑文档中的函数。

// On slide change, pause all videos
$('#main-slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  $('video').each(function() {
    $(this).get(0).pause();
  });
});

// On slide chnage, play a video inside the current slide
$('#main-slider').on('afterChange', function(event, slick, currentSlide, nextSlide){
  if( $('.project-slide.slick-current').find('video').length !== 0) {
    $("#main-slider .slick-current video")[0].play();
  }
});

关于javascript - 在光滑的轮播中添加视频自动播放，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29901228/