добавить автовоспроизведение видео в slick carousel

Question

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

и сценаристов

$('#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 functioncurrentSlide это просто число (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 функция обратного вызова приостанавливает все видео, присутствующие в s независимо от воспроизведения видео или нет.

Если есть 100 слайдов, оно приостанавливает все 100 видео, хотя они не играют. Его лучше вы найдете предыдущий слайд и сделать паузу только видео в этом слайде

Answer 2

вы можете просто получить идентификатор из видеотега и

$("#videotagId").pause();