滑动滑块时，光滑的滑块会暂停youtube视频 [英] Slick slider pause youtube video when slide change

问题描述

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

I have created a image slider using Jquery Slick Slider, Its having youtube video clips as well. When page load youtube video is set to 1st slide of the slider and it is autoplay and starts playing. I want, when I change slider frame to next slide youtube video stops playing.

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

I look at other stackoverflow answers but can't find anything.

我尝试过-

这是我的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-

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视频也不会停止，在更改幻灯片时它仍在播放.

This code is not working and youtube video does not stops, Its still playing when slide change.

有什么建议吗?

谢谢

推荐答案

添加Sequence的答案后，即使页面上有多个滑块，该滑块也将起作用.

Adding off of Sequence's answer, this will allow the slider to function even if there is more than one slider on the page.

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

这篇关于滑动滑块时，光滑的滑块会暂停youtube视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！