jquery – Slick Carousel：当youtube视频播放时暂停Slick自动播放

我正在使用 http://kenwheeler.github.io/slick/作为转盘.但问题是,即使在播放YouTube视频时,自动播放也会将光滑滑动到下一个.

JSFIDDLE

目前我正在使用下面的JS,但似乎没有任何工作.

$('#main-slider').slick({
      slidesToShow: 1,slidesToScroll: 1,autoplay: true,autoplaySpeed: 3000,dots: true,infinite: true,adaptiveHeight: true,arrows: false
  });

  var video = $('#main-slider .slick-active').find('iframe').get(0).play();

  $('#main-slider').on('afterChange',function(event,slick,currentSlide,nextSlide){
    $('#main-slider .slick-slide').find('video').get(0).pause();
    var video = $('#main-slider .slick-active').find('video').get(0).play();
});

几乎没有类似的问题,但没有一个有解决方案.
Slick-carousel how to stop autoplay when video is on via youtube api

解决方法

请在这里找到解决方案：

小提琴：http://jsfiddle.net/rijokpaul/pyzpg7st/2/

我用YouTube Iframe API解决了它

var tag = document.createElement('script');
    tag.id = 'iframe-demo';
    tag.src = 'https://www.youtube.com/iframe_api';
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag,firstScriptTag);

    var player;
    function onYouTubeIframeAPIReady() {
        var elems1 = document.getElementsByClassName('yt-player');
        for(var i = 0; i < elems1.length; i++) {

            player = new YT.Player(elems1[i],{
                events: {
                    //'onReady': onPlayerReady,'onStateChange': onPlayerStateChange
                }
            });
        }
    }
    function onPlayerReady(event) {

    }
    function handleVideo(playerStatus) {
        if (playerStatus == -1) {
            // unstarted
            $('#main-slider').slick('slickPause');
        } else if (playerStatus == 0) {
            // ended
            $('#main-slider').slick('slickPlay');

        } else if (playerStatus == 1) {
            // playing = green                
            $('#main-slider').slick('slickPause');                
        } else if (playerStatus == 2) {
            // paused = red
            $('#main-slider').slick('slickPlay');
        } else if (playerStatus == 3) {
            // buffering = purple
        } else if (playerStatus == 5) {
            // video cued
        }
    }
    function onPlayerStateChange(event) {
        handleVideo(event.data);
    }

    $(function() {
        $('#main-slider').slick({
            slidesToShow: 1,pauSEOnFocus: false,pauSEOnHover: false,arrows: false
        });

    });

    $('#main-slider').on('beforeChange',nextSlide){
        $('.yt-player').each(function(){
            this.contentwindow.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}','*')
        });
    });

还更新了iframe,如下所示

<iframe class="yt-player" src="https://www.youtube.com/embed/lqj-QNYsZFk?controls=1&rel=0&enablejsapi=1"></iframe>

在iframe url的末尾添加了& enablejsapi = 1,并使用了一个名为yt-player的类.

UPDATE

评论onReady功能并使用slick beforeChange事件暂停YouTube视频未激活时.