Добавить автовоспроизведение видео в карусели

Я использую slick carousel 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>

и script

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

и теперь все работает так, как я хочу, но я боюсь, что мой код уродлив (