幻灯片滑块在幻灯片更改时暂停youtube视频

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了幻灯片滑块在幻灯片更改时暂停youtube视频相关的知识,希望对你有一定的参考价值。

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

我看看其他stackoverflow的答案,但找不到任何东西。

我试过这个 -

这是我的div结构 -

<div id="mainSlider" class="box box-default">
    <div class="sliderItem"><div class="playerID"><iframe width="100%" height="100%" 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视频不会停止,它仍然在幻灯片更改时播放。

有什么建议?

谢谢

答案

添加序列的答案,即使页面上有多个滑块,也可以使滑块起作用。

$('.mainSlider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  var current = $(slick.$slides[currentSlide]);
  current.html(current.html());
});
另一答案

我会重置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());
});
另一答案

检查最简单的方法,当前幻灯片iframe src重置:

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

以上是关于幻灯片滑块在幻灯片更改时暂停youtube视频的主要内容,如果未能解决你的问题,请参考以下文章

使用 jQuery 单击按钮时,如何暂停 YouTube 视频?

光滑的滑块 - 当滑块进入下一帧时暂停 YouTube 剪辑

BXSlider 切换幻灯片时暂停 Youtube 视频

Coda 滑块在第 12 个幻灯片项目后退出

使用 React Slick 滑块在每张幻灯片中添加点

youtube - 无法在轮播/滑块中滑过 iframe