滑动滑块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

这是因为如何制作光滑滑块，进行圆形滑动，在启动时克隆幻灯片，因此当您在第一个和最后一个之间滑动时，它会显示克隆的幻灯片，其状态不会同步。

我修改了您的示例，以跟踪和同步每个克隆幻灯片中的youtube播放器的currentTime，这样您就不会注意到转换

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