滑动滑块更改幻灯片时暂停 youtube 视频 [英] Slick slider pause youtube video when slide change

问题描述

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

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

我试过了 -

这是我的 div 结构-

<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>

我使用了 JS -

$("#mainSlider").slick({点:对，自动播放:假，自动播放速度:7000，速度:500，pauseOnHover: 真,回应:[{断点:1025，设置:{箭头:真实，点:假}}]}).on('afterChange', function( e, slick, currentSlide ) {$('.bumper').css('display', 'block');playpausevideo($currentSlide.eq(e).data('youtubeplayer'), '暂停')});

Youtube JS -

function onYouTubeIframeAPIReady(){//加载 Youtube API 时自动调用此函数(参见:https://developers.google.com/youtube/iframe_api_reference)jQuery(function($){//当 DOM 加载完毕var $contentdivs = $('.sliderItem').find('div.playerID')$contentdivs.each(function(i){//遍历内容 divvar $contentdiv = $(this)var $youtubeframe = $contentdiv.find('iframe[src*="youtube.com"]:eq(0)')//在 DIV 中查找 Youtube iframe，如果存在的话如果($youtubeframe.length == 1){var player = new YT.Player($youtubeframe.get(0), {//在每个 Youtube iframe(它的 DOM 对象)上实例化一个新的 Youtube API 播放器事件:{'onReady': function(e){e.target._donecheck=true}//指示视频何时完成加载}})$contentdiv.data("youtubeplayer", player)//在 contentdiv 对象中存储 Youtube API 播放器}})})}功能播放暂停视频(播放器，动作){if (player && player._donecheck === true){如果(动作==播放")player.playVideo()否则如果(动作==暂停")player.pauseVideo()}<script src="http://www.youtube.com/iframe_api"></script>

此代码不起作用，YouTube 视频不会停止，但在更换幻灯片时仍在播放.

有什么建议吗?

谢谢

解决方案

添加 Sequence 的答案，这将允许滑块运行，即使页面上有多个滑块.

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

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.

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

I tried this -

Here is my div structure-

<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>

I used 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>

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

Any suggestions?

Thanks

解决方案

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屋！