Slick Carousel - 播放 YouTube 视频时暂停滑块的自动播放答案

【问题标题】：Slick Carousel - Pause the slider's autoplay when a YouTube video is playingSlick Carousel - 播放 YouTube 视频时暂停滑块的自动播放
【发布时间】：2017-04-01 22:27:50
【问题描述】：

使用slick.js，我可以在前进到下一张幻灯片后暂停正在播放的 YouTube 视频。

但是，我不知道如何在视频播放时在滑块本身上暂停滑块的 autoplay 功能 (slickPause)。

然后，只有在视频播放完毕或用户前进到另一张幻灯片后，才能在滑块上恢复 autoplay。

请帮忙！

(function($) {
    jQuery(document).ready(function($) {
        $(".hero-slider").on("beforeChange", function(event, slick) {
            var currentSlide, slideType, player, command;
            currentSlide = $(slick.$slider).find(".slick-current");
            slideType = currentSlide.attr("class").split(" ")[1];

            player = currentSlide.find("iframe").get(0);
            if (slideType == "vimeo") {
                command = {
                    "method": "pause",
                    "value": "true"
                };
            } else {
                command = {
                    "event": "command",
                    "func": "pauseVideo",
                    "args": ""
                };
            }
            if (player != undefined) {
                player.contentWindow.postMessage(JSON.stringify(command), "*");
            }
        });
        $(".hero-slider").slick({
            infinite: true,
            arrows: true,
            dots: false,
            fade: true,
            cssEase: 'linear',
            autoplay: true,
            autoplaySpeed: 5000,
            focusOnSelect: true
        });
    });
})(jQuery);

【问题讨论】：

标签： youtube-api slick.js

【解决方案1】：

您可以参考这个sample code。你可以像这样使用slickPause：

$('.hero-slider').click(function() {
  $('.hero-slider').slick('slickPause');
});

另外，这里有一些可能会有所帮助的参考资料：

【讨论】：

不幸的是，我已经看过这些参考资料。他们没有提供任何新的见解来回答我的问题。指定 pause onclick 很好，但是，这会阻止滑块完全自动播放。当视频结束或视频暂停时，我需要滑块自动播放。