Slick-карусель, как остановить автозапуск, когда видео на YouTube с помощью API

Question

Привет У меня возникли проблемы, чтобы получить гладкую карусель (http://kenwheeler.github.io/slick/), чтобы остановить автозапуск, когда я использую клип внутри юность слайдера ..

Кто-то сказал, что я могу использовать onAfterChange, но до сих пор не знаю, как отключить автовоспроизведение при включенном видео (помните, что это когда мышь в НЕ на видео)

Вот код, который я использую любую помощь. быть хорошим :)

$("#slider").slick({ 
    slidesToShow: 1, 
    slidesToScroll: 1, 
    arrows: false, 
    dots: true, 
    autoplay: true, 
    autoplaySpeed: 7000, 
    infinite: true 
}); 

/* **************************************** * 
* Youtube API 
* Create player 
* **************************************** */ 
var player; 
window.onYouTubePlayerAPIReady = function() { 

    $("#player").hide(); 
    var player_id = 'player'; 
    var $player  = jQuery('#'+player_id); 
    var parent  = $player.parent(); 

    player = new YT.Player(player_id, { 
     videoId: 'HevnOuJY1TM', 
     height: parent.height(), 
     width: '100%', 
     playerVars: { 
      'autoplay': 0, 
      'controls': 0, 
      'rel' : 0, 
      'disablekb' : 0, 
      'modestbranding' : 1, 
      'showinfo': 0, 
      'html5': 1 
     }, 
     events: { 
      'onReady': onPlayerReady, 
      'onStateChange': onPlayerStateChange 
     } 


    }); 

    var sizeVideo = _.debounce(function() { 

     player.setSize('100%', parent.height()); 

    }, 500); 

    jQuery(window).on('load resize', sizeVideo); 

    jQuery(window).trigger('resize'); 
}; 

function onPlayerReady() { 
    $("#slide-video").on("click", function() { 
     $(this).css('background','transparent'); 
     $("#player").show(); 
     player.playVideo(); 
    }); 
} 

function onPlayerStateChange(event) { 

    if(event.data === 0) { 
     $(".countdown").fadeIn(); 
    } 

    if(event.data === 1) { 
     $(".countdown").fadeOut(); 
    } 

    if(event.data === 2) { 
     $(".countdown").fadeIn(); 
    } 

    if(1 === event || 2 === event || 3 === event) { 
     $('#slider') 
      .slick('slickPause') 
      .slick('slickSetOption', 'autoplay', false, true); 
    } else { 
     $('#slider').slick('slickPlay') 
      .slick('slickSetOption', 'autoplay', true, true); 
    } 
} 

}); 

Answer 1

onAfterChange - свойство slick, которое может быть передано в инициировании плагина.

/* Slick slider init */ 
$("#slider").slick({ 
    slidesToShow: 1, 
    slidesToScroll: 1, 
    arrows: false, 
    dots: true, 
    autoplay: true, 
    autoplaySpeed: 7000, 
    infinite: true, 
    onAfterChange : function() { 
    player.stopVideo(); 
    } 
}); 

EDIT

Чтобы остановить бегунок при запуске видео, я думаю, глядя на свой код, вот что вы можете попробовать:

function onPlayerReady() { 
    $("#slide-video").on("click", function() { 

     // pause the slider 
     $('#slider').slick('slickPause'); 

     $(this).css('background','transparent'); 
     $("#player").show(); 
     player.playVideo(); 
    }); 
} 

Answer 2

Я нашел решение моей проблемы :

function onPlayerReady() { 
     $("#slide-video").on("click", function() { 
      $(this).hover(function(){ 
       slider.slick('slickPause'); 
      }); 
      $(this).css('background','transparent'); 
      $("#player").show(); 
      player.playVideo(); 
     }); 
    } 

    function onPlayerStateChange(event) { 
     if(event.data === 0 || event.data === 2) { 
      $(".countdown").fadeIn(); 
     } 

     if(event.data === 1) { 
      $(".countdown").fadeOut(); 
     } 

     if(1 === event.data || 2 === event.data || 3 === event.data) { 
      slider.slick('slickPause'); 

     } else { 
      slider.slick('slickPlay'); 
     } 
    } 

Это работало на моем конце в хроме & Safari .. Firefox не работает, и IE я не могу попробовать с тех пор, как я не на ПК, а на MAC, но вот почему я поместил функцию зависания, если кто-то хочет иметь мышь там?

update: Хорошо, теперь он работает со всеми .. его сразу после паузы видео, а затем возобновить его после того, как ползунок исчез, как только он больше не будет использовать функцию slickPause.