jquery - 光滑的旋转木马 : Pause the Slick autoplay when youtube video is playing

Question

我正在使用 http://kenwheeler.github.io/slick/为了狂欢。但问题是即使正在播放 youtube 视频，自动播放也会将 slick 滑动到下一个。

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

Answer 1

请在这里找到解决方案:

fiddle :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,
            slidesToScroll: 1,
            autoplay: true,
            autoplaySpeed: 3000,
            pauseOnFocus: false,
            pauseOnHover: false,
            dots: true,
            infinite: true,
            adaptiveHeight: true,
            arrows: false
        });

    });

    $('#main-slider').on('beforeChange', function(event, slick, currentSlide, 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 的类。

更新

注释了 onReady 函数并使用 slick beforeChange 事件在 YouTube 视频不活动时暂停。