Слайсор слайдера YouTube сбой на последнем и первом слайде

Question

Я пытаюсь реализовать slick slider, который содержит бесконечную серию циклов видео Youtube, которые автоматически запускаются и приостанавливаются при прокрутке на следующий слайд и т. Д. Я также хотел, видео, как вы можете с изображениями.

У меня это работает, но я замечаю проблему при скольжении от последнего слайда до первого слайда. Вместо того, чтобы останавливать паузу, последние и первые видео останавливаются, но затем отображаются изображение обложки видео, а не просто приостанавливаются.

Вот мой HTML ...

<div class="slider-youtube"> 
    <div class="item youtube"> 
     <div class="video-background"> 
      <div class="video-foreground"> 
       <iframe src="https://www.youtube.com/embed/M-hGwtvtXCk?controls=0&amp;showinfo=0&amp;loop=1&playlist=M-hGwtvtXCk&amp;enablejsapi=1&amp;iv_load_policy=3&amp;rel=0&amp;modestbranding=1" frameborder="0" allowfullscreen></iframe> 
      </div> 
     </div> 
     <div class="slick-button"> 
      <a href="#">SEE MORE</a> 
     </div> 
    </div> 
    <div class="item youtube"> 
     <div class="video-background"> 
      <div class="video-foreground"> 
       <iframe src="https://www.youtube.com/embed/V2vwFS8ae2I?controls=0&amp;showinfo=0&amp;loop=1&playlist=V2vwFS8ae2I&amp;enablejsapi=1&amp;iv_load_policy=3&amp;rel=0&amp;modestbranding=1" frameborder="0" allowfullscreen></iframe> 
      </div> 
     </div> 
     <div class="slick-button"> 
      <a href="#">SEE MORE</a> 
     </div> 
    </div> 
    <div class="item youtube"> 
     <div class="video-background"> 
      <div class="video-foreground"> 
       <iframe src="https://www.youtube.com/embed/YXBUD7-ACMM?controls=0&amp;showinfo=0&amp;loop=1&playlist=YXBUD7-ACMM&amp;enablejsapi=1&amp;iv_load_policy=3&amp;rel=0&amp;modestbranding=1" frameborder="0" allowfullscreen></iframe> 
      </div> 
     </div> 
     <div class="slick-button"> 
      <a href="#">SEE MORE</a> 
     </div> 
    </div> 
</div> 

Вот мой CSS ...

.slider-youtube iframe { 
    min-width: 700px; 
    height: 400px; 
} 
.slider-youtube .youtube { 
    opacity: 1; 
    transition: opacity 1s; 
} 
.slider-youtube .youtube:not(.slick-current) { 
    opacity: 0.4; 
    transition: opacity 1s; 
} 
img.slick-slide { 
    max-width: 100vw; 
} 
.video-background { 
    background: #000; 
    z-index: -99; 
    max-height: 400px; 
} 
.video-foreground, 
.video-background iframe { 
    width: 100%; 
    height: 400px; 
    pointer-events: none; 
} 
.slick-button { 
    position: relative; 
    bottom: 60px; 
    text-align: center; 
    z-index: 9999; 
} 
.slick-button a { 
    color: white; 
    background-color: black; 
} 

... и вот мой Javascript ...

$(document).ready(function() { 
    //on first load, play the video 
    $(".slider-youtube").on('init', function(event, slick, currentSlide) { 
     var currentSlide, player, command; 
     currentSlide = $(slick.$slider).find(".slick-current"); 
     player = currentSlide.find("iframe").get(0); 
     command = { 
      "event": "command", 
      "func": "playVideo" 
     }; 
     setTimeout(
      function() { 
       player.contentWindow.postMessage(JSON.stringify(command), "*"); 
      }, 5000); 
    }); 
    //when new slide displays, play the video 
    $(".slider-youtube").on("afterChange", function(event, slick) { 
     var currentSlide, player, command; 
     currentSlide = $(slick.$slider).find(".slick-current"); 
     player = currentSlide.find("iframe").get(0); 
     command = { 
      "event": "command", 
      "func": "playVideo" 
     }; 
     if (player != undefined) { 
      player.contentWindow.postMessage(JSON.stringify(command), "*"); 
     } 
    }); 
    //reset iframe of non current slide 
    $(".slider-youtube").on('beforeChange', function(event, slick, currentSlidee) { 
     var current = $('.slick-current'); 
     var currentSlide, player, command; 
     currentSlide = $(slick.$slider).find(".slick-current"); 
     player = currentSlide.find("iframe").get(0); 
     command = { 
      "event": "command", 
      "func": "pauseVideo" 
     }; 
     if (player != undefined) { 
      player.contentWindow.postMessage(JSON.stringify(command), "*"); 
     } 
    }); 
    //start the slider 
    $('.slider-youtube').slick({ 
     slidesToShow: 1, 
     arrows: false, 
     centerMode: true, 
     centerPadding: '50px', 
     infinite: true, 
     variableWidth: true 
    }); 
}); 

Вот jsfiddle ,

Я пробовал это в последней версии IE/Firefox и Chrome, и все же происходит то же самое.

Это мой первый пост, так извиняюсь, если я сделал что-то не так, я пробовал найти эту проблему уже без везения.

Answer 1

Это потому, что сделано скольжение слайдера, чтобы сделать круговое скольжение, оно клонирует слайды при запуске, поэтому при скольжении между первым и последним он показывает клонированный слайд, его состояние не синхронизировано.

Я изменил свой пример, чтобы отслеживать и синхронизировать CURRENTTIME из проигрывателя YouTube в каждом из клонированных слайдов, таким образом, вы не заметите переход

HTML

<script src="//www.youtube.com/iframe_api"></script> 

<div class="slider-youtube"> 
    <div class="item youtube"> 
     <div class="video-background"> 
      <div class="video-foreground"> 
       <iframe src="https://www.youtube.com/embed/M-hGwtvtXCk?controls=0&amp;showinfo=0&amp;loop=1&playlist=M-hGwtvtXCk&amp;enablejsapi=1&amp;iv_load_policy=3&amp;rel=0&amp;modestbranding=1" frameborder="0" allowfullscreen></iframe> 
      </div> 
     </div> 
     <div class="slick-button"> 
      <a href="#">SEE MORE</a> 
     </div> 
    </div> 
    <div class="item youtube"> 
     <div class="video-background"> 
      <div class="video-foreground"> 
       <iframe src="https://www.youtube.com/embed/V2vwFS8ae2I?controls=0&amp;showinfo=0&amp;loop=1&playlist=V2vwFS8ae2I&amp;enablejsapi=1&amp;iv_load_policy=3&amp;rel=0&amp;modestbranding=1" frameborder="0" allowfullscreen></iframe> 
      </div> 
     </div> 
     <div class="slick-button"> 
      <a href="#">SEE MORE</a> 
     </div> 
    </div> 
    <div class="item youtube"> 
     <div class="video-background"> 
      <div class="video-foreground"> 
       <iframe src="https://www.youtube.com/embed/YXBUD7-ACMM?controls=0&amp;showinfo=0&amp;loop=1&playlist=YXBUD7-ACMM&amp;enablejsapi=1&amp;iv_load_policy=3&amp;rel=0&amp;modestbranding=1" frameborder="0" allowfullscreen></iframe> 
      </div> 
     </div> 
     <div class="slick-button"> 
      <a href="#">SEE MORE</a> 
     </div> 
    </div> 
</div> 

JS

$(document).ready(function() { 
     $(".slider-youtube iframe").each(function (idx) { 
     $(this).addClass("data-idx-" + idx).data("idx", idx); 
    }); 

     function getPlayer (iframe, onPlayerReady, clonned) { 
      var $iframe = $(iframe); 
     if ($iframe.data((clonned ? "clonned-" : "") + "player")) { 
      var isReady = $iframe.data((clonned ? "clonned-" : "") + "player-ready"); 
      if (isReady) { 
      onPlayerReady && onPlayerReady($iframe.data((clonned ? "clonned-" : "") + "player")); 
      }   
      return player; 
     } 
     else { 
      var player = new YT.Player($iframe.get(0), { 
      events: { 
       'onReady': function() { 
       $iframe.data((clonned ? "clonned-" : "") + "player-ready", true); 
       onPlayerReady && onPlayerReady(player); 
       } 
      } 
      });   
      $iframe.data((clonned ? "clonned-" : "") + "player", player); 
      return player; 
     }   
    } 

    //on first load, play the video 
    $(".slider-youtube").on('init', function(event, slick, currentSlide) { 
     var currentSlide, player, command; 
     currentSlide = $(slick.$slider).find(".slick-current");   
     getPlayer(currentSlide.find("iframe"), function (player) { 
      player.playVideo(); 
     }); 
    }); 

    //when new slide displays, play the video 
    $(".slider-youtube").on("afterChange", function(event, slick) { 
     var currentSlide; 
     currentSlide = $(slick.$slider).find(".slick-current"); 
     getPlayer(currentSlide.find("iframe"), function (player) { 
      player.playVideo(); 
     }); 
    }); 

    function updateClonnedFrames() { 
     frames = $(".slider-youtube").find(".slick-slide").not(".slick-cloned").find("iframe"); 
     frames.each(function() { 
     var frame = $(this); 
     var idx = frame.data("idx"); 
     clonedFrames = $(".slider-youtube").find(".slick-cloned .data-idx-" + idx); 
     console.log("clonedFrames", frame, idx, clonedFrames); 
     clonedFrames.each(function() { 
      var clonnedFrame = this; 
      getPlayer(frame[0], function (player) { 
      getPlayer(clonnedFrame, function (clonedPlayer) {   
       console.log("clonnedPlayer", clonedPlayer); 
       clonedPlayer.playVideo(); 
       clonedPlayer.seekTo(player.getCurrentTime(), true); 
       setTimeout(function() { 
       clonedPlayer.pauseVideo();   
       }, 0);    
      }, true); 
      }); 
     });   
     });    
    } 

    //reset iframe of non current slide 
    $(".slider-youtube").on('beforeChange', function(event, slick, currentSlidee) { 
     var currentSlide, iframe, clonedFrame; 
     currentSlide = $(slick.$slider).find(".slick-current"); 
     iframe = currentSlide.find("iframe");   
     getPlayer(iframe, function (player) { 
      player.pauseVideo(); 
      updateClonnedFrames(); 
     });   
    }); 

    //start the slider 
    $('.slider-youtube').slick({ 
     slidesToShow: 1, 
     arrows: false, 
     centerMode: true, 
     centerPadding: '50px', 
     infinite: true, 
     variableWidth: true 
    }); 
}); 

и jsfiddle