光滑的滑块 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 的最新版本中尝试过，但仍然发生同样的事情。

这是我的第一个 post 如果我做错了什么，我深表歉意，我已经尝试搜索这个问题，但没有成功。

Answer 1

这是因为Slick slider的制作方式，为了做圆形滑动它会在启动时克隆幻灯片，所以当你在第一张和最后一张之间滑动时它显示的是克隆的幻灯片，它的状态是不同步的。

我修改了您的示例以跟踪和同步每张克隆幻灯片中的 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

光滑的滑块 YouTube 在最后一张和第一张幻灯片上出现故障

Slick slider YouTube glitch on last and first slide

youtube

jquery

slider

carousel

slick.js