Пауза / Воспроизведение видео в слайдере Slick

Question

У меня есть слайдер Slick с некоторыми изображениями и видео html5. Мне удалось заставить стрелки Prev/Next работать: если я нажимаю на стрелки, слайдер переходит к следующему видео (оно воспроизводится автоматически), а предыдущее видео приостанавливается.

Теперь я добавил кнопку, чтобы приостановить / воспроизвести текущее видео, но не могу найти способ заставить его работать должным образом. Кнопка работает только при первом воспроизведении видео. Если я поменяю слайд и вернусь к тому же видео, я больше не смогу его приостановить.

$('.sliderVideo').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
fade: true,
dots: true,
autoplay: true,
autoplaySpeed: 1000,
adaptiveHeight: true,
pauseOnHover:false,
cssEase: 'linear'});


$('.sliderVideo').on('beforeChange', function(event, slick, currentSlide, nextSlide){    
  $("video").each(function(){
    $(this).get(0).pause();
  });
});


$('.sliderVideo').on('afterChange', function(event, slick, currentSlide) {
var vid = $(slick.$slides[currentSlide]).find('video');
if (vid.length > 0) {
    $('.sliderVideo').slick('slickPause');
    $(vid).get(0).play();


    var MyPlayButton = $(slick.$slides[currentSlide]).find('.play-button');
    //var MyPlayButton = $('.play-button');

        MyPlayButton.on('click', function () {

        if ($(vid).get(0).paused) {         
            $(vid).get(0).play();
            console.log('play');
        } else {
            $(vid).get(0).pause();
            console.log('paused');
        }
        return false;
    }); 
}   
});

$('video').on('ended',function(){           
$('.sliderVideo').slick('slickPlay');});

Буду очень признателен за вашу помощь.

Я создал скрипку https://jsfiddle.net/8ds3Lrxm/22/

Answer 1

ОК, исправлено так:

var MyPlayButton = null;

$('.sliderVideo').on('beforeChange', function(event, slick, currentSlide, nextSlide){

if (null !== MyPlayButton) {
    MyPlayButton.off('click');
}

$("video").each(function(){
    $(this).get(0).pause();
  });

});

Answer 2

Очень простой способ (лучше всего - простой):
мы сбрасываем видео каждый раз, когда начинаем его воспроизводить...

$('#slider_id').on('beforeChange', function(event, slick, currentSlide, nextSlide){

    // pause old video (better performance)
    var old_vid = $('#slider_id .slide:eq('+currentSlide+')').find('video');
    $(old_vid).get(0).pause();


    // play current video from start
    var cur_vid = $('#slider_id .slide:eq('+nextSlide+')').find('video');
    $(cur_vid).get(0).currentTime = 0;
    $(cur_vid).get(0).play();

});

Answer 3

$('.video_banner_slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  
   console.log(currentSlide);
   $("video").each(function(){
       $(this).get(0).pause();
     });

});