Slick-carousel如何通过youtube api打开video时停止自动播放

嗨，当我在滑块内使用youtube剪辑时，我无法获得光滑的旋转木马（ http://kenwheeler.github.io/slick/ ）来停止自动播放。

有人说我可以使用onAfterChange，但仍然不知道如何在video打开时关闭自动播放（请注意，这是鼠标在video上的NOT时）

这是我正在使用的代码任何帮助都会很好:)

$("#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

我找到了解决问题的方法：

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

这在我的Chrome和Safari上工作。火狐没有工作和IE我不能尝试，因为我不是在电脑上，但在MAC，但这就是为什么我推出了hoverfunction，因为有人想要鼠标在那里？

更新：好吧它现在适用于所有..它只是在您暂停video然后在滑块消失之后恢复它之后它将不再使用slickPausefunction。

Answer 2

onAfterChange是一个可以在插件启动中传递的光滑属性。

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

编辑

要在video开始时停止滑块，我想看看你的代码，这是你可以尝试的：

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