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

Question

您好，当我在滑块内使用 youtube 剪辑时，我无法让光滑的轮播 (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

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

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 上有效。. Firefox 无法在 IE 上运行，因为我不是在 PC 上而是在 MAC 上，所以我无法尝试，但这就是为什么我设置了悬停功能以防有人想在那里使用鼠标?

更新：好的，它现在适用于所有人。它就在您暂停视频之后，然后在滑块消失后恢复它，一旦它不再使用 slickPause 功能。

Answer 2

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

编辑

要在视频开始时停止滑块，我想看看您的代码，您可以尝试以下方法：

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

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

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