Slick-карусель как остановить автовоспроизведение при включенном видео через YouTube API
Привет у меня возникли проблемы, чтобы получить гладкую карусель (http://kenwheeler.github.io/slick/), чтобы остановить автовоспроизведение, когда я использую клип YouTube внутри слайдера.
Кто-то сказал, что я могу использовать 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);
}
}
});