光滑轮播:播放视频时暂停光滑自动播放

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如何通过youtube api打开视频时停止自动播放

Answer 1

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