Question

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

有人说我可以使用onAfterChange，但仍然不知道如何在视频打开时关闭自动播放（请注意，这是鼠标在视频上的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和＆amp; Safari .. Firefox没有工作和IE我不能尝试，因为我不是在PC上，但在MAC上，但那就是为什么我推出了悬停功能，有人想要有鼠标吗？

更新：好的它现在适用于所有...它只是在你暂停视频然后在滑块消失之后恢复它之后它将不再使用slickPause功能。

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

修改

要在视频开始时停止滑块，我想会查看您的代码，这是您可以尝试的内容：

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

Slick-carousel如何通过youtube api

2 个答案: