当幻灯片更改时，光滑的滑块会暂停 youtube 视频

Posted 2023-02-25

【中文标题】当幻灯片更改时，光滑的滑块会暂停 youtube 视频

【英文标题】：Slick slider pause youtube video when slide change

【发布时间】：2015-12-18 05:40:01

【问题描述】：

我使用 Jquery Slick Slider 创建了一个图像滑块，它也有 youtube 视频剪辑。当页面加载 youtube 视频设置为滑块的第一张幻灯片时，它会自动播放并开始播放。我想要，当我将滑块框架更改为下一张幻灯片时，youtube 视频会停止播放。

我查看了其他 *** 答案，但找不到任何东西。

我试过了 -

这是我的 div 结构-

<div id="mainSlider" class="box box-default">
    <div class="sliderItem"><div class="playerID"><iframe   frameborder="0" allowfullscreen="" src="https://www.youtube.com/embed/VIDEO_ID?rel=0&amp;autoplay=1&amp;version=3&amp;loop=1&amp;playlist=VIDEO_ID&amp;enablejsapi=1" id="player"></iframe></div></div>
    <div class="sliderItem"><img src="" /></div>
    <div class="sliderItem"><img src="" /></div>
    <div class="sliderItem"><img src="" /></div>
</div>

我用过 JS -

$("#mainSlider").slick(
         dots: true,
          autoplay: false,
          autoplaySpeed: 7000,
          speed: 500,
          pauseOnHover: true,
           responsive: [
        
          breakpoint: 1025,
          settings: 
            arrows: true,
            dots: false
          
        
      ]
    )
    .on('afterChange', function( e, slick, currentSlide ) 
          $('.bumper').css('display', 'block');
          playpausevideo($currentSlide.eq(e).data('youtubeplayer'), 'pause')
    );

Youtube JS -

function onYouTubeIframeAPIReady() // this function is called automatically when Youtube API is loaded (see: https://developers.google.com/youtube/iframe_api_reference)
jQuery(function($) // when DOM has loaded
    var $contentdivs = $('.sliderItem').find('div.playerID')
    $contentdivs.each(function(i) // loop through the content divs
        var $contentdiv = $(this)
        var $youtubeframe = $contentdiv.find('iframe[src*="youtube.com"]:eq(0)') // find Youtube iframe within DIV, if it exists
        if ($youtubeframe.length == 1)
          var player = new YT.Player($youtubeframe.get(0),  // instantiate a new Youtube API player on each Youtube iframe (its DOM object)
            events: 
              'onReady': function(e)e.target._donecheck=true // indicate when video has done loading
            
          )
            $contentdiv.data("youtubeplayer", player) // store Youtube API player inside contentdiv object
        
    )
)


function playpausevideo(player, action)
    if (player && player._donecheck === true)
        if (action == "play")
            player.playVideo()
        else if (action == "pause")
            player.pauseVideo()
    
    <script src="http://www.youtube.com/iframe_api"></script>

此代码不起作用，youtube 视频不会停止，幻灯片切换时仍在播放。

有什么建议吗？

谢谢

【参考方案1】：

加上 Sequence 的答案，即使页面上有多个滑块，这也将允许滑块发挥作用。

$('.mainSlider').on('beforeChange', function(event, slick, currentSlide, nextSlide)
  var current = $(slick.$slides[currentSlide]);
  current.html(current.html());
);

【讨论】：

更强大！这对我来说是首选。

使用通过事件传递的slick 变量的出色补充。

【参考方案2】：

查看最简单的方法，Current slide iframe src reset：

$('.mainSlider').on('beforeChange', function (event, slick, currentSlide, nextSlide) 
       $('.slick-current iframe').attr('src', $('.slick-current iframe').attr('src'));
);

【参考方案3】：

我会重置 HTML 内容。它将杀死 IFrame 并重建它。

var slider =  $('.mainSlider').slick(
    slidesToShow: 1,
    autoplay: false,
    autoplaySpeed: 5000
);

slider.on('beforeChange', function(event, slick, currentSlide, nextSlide)
    var current = $('.slick-current');
    current.html(current.html());
);