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

Question

我正在使用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

Answer 1

请在此处找到解决方案：

小提琴：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 视频不活动时暂停它。

Answer 2

同时使用 slick 和 videojs 很难，其中有太多错误（我们需要手动处理的事件/条件），尤其是使用 youtube 作为源。

我在代码中解释了如何做到这一点：fiddle

$(function(){
    var videoPlayed = false;

    function pauseSlider(){
        myslider.slick('slickPause');
    } 

    function playSlider(){
        myslider.slick('slickPlay');
    }

    /*
        assign videojs handle on pause and play dinamically.
        place this script before slick initialize only.
        because slick will cloned our element, so we will confuse to assign event handle on our videjs element

        but if you want it you change selector from `.video-slider` to `"#main-slider .slick-slide:not(.slick-cloned) .video-slider"`
    */
    //$("#main-slider .slick-slide:not(.slick-cloned) .video-slider").each(function(i,e){
    $(".video-slider").each(function(i,e){
        var id=$(this).attr('id');
        videojs.players[id].on("pause", function(){
            videoPlayed= false;
            playSlider();
        });
        videojs.players[id].on("play", function(){
            pauseSlider();
            videoPlayed= true;
        });
    });

    var myslider = $('#main-slider').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        /*
            when video play, slider is stopped. 
            but when event mouseout (hover out)/focus out triggered, 
            the slider will contine to play again.
            this is because pauseOnHover and pauseOnFocus default true.
            And because you want adaptiveHeight (full screen slider), 
            i assume you no need to doing pauseOnHover, because all time mouse will stay inside your slider.
            in this case we need to change pauseOnHover and pauseOnFocus to false
        */
        pauseOnHover:false,
        pauseOnFocus:false,
        autoplay: true,
        autoplaySpeed: 3000,
        dots: true,
        infinite: true,
        adaptiveHeight: true,
        arrows: false
    });

    $('.video-slider').click(function(){
        if(videoPlayed){
            /*
                actually this is will never executed. but sometimes 
                this will execute if user spam play pause on slow network.
                so we still leave here to handle if videojs pause event not called.
            */
            videojs($(this).attr('id')).pause();//pause video 1st then play the slider
            videoPlayed= false;
            playSlider();
        }else{
            pauseSlider();//pause slider 1st then play the video
            videojs($(this).attr('id')).play();
            videoPlayed= true;
        }
    });
});