Slick JS 视频轮播暂停 YouTube 视频，并永久隐藏占位符图像

Question

这是 CodePen：http://codepen.io/frankDraws/pen/RWgBBw

总结这是一个带有视频轮播的广告，使用 SlickJS。

只有 3 个 YouTube 视频，但 Slick 有一个我们正在使用的 infinite 选项。

问题 1. 我需要占位符 img 在点击时永久隐藏（包括克隆）。 2. 我需要 YouTube 视频在滚动时暂停 prev/next（包括克隆）。 3. 我也很乐意为此整合最终代码。

目前占位符在点击时消失，但当你滚动时，它会重新出现（取决于你点击哪个占位符以及你滚动的方向）。

我的猜测是在 SlickJS 的某处，它正在将图像放回去。我不知道它在 Slick 的哪个位置执行此操作，也不知道如何覆盖它。

我一直在尝试多种方法，包括：

$("#c1").on('click',function(){
  $(this).html('<iframe id="video01" width="100%" height="100%" src="http://www.youtube.com/embed/c07DH4HY2CA?list=&amp;wmode=opaque&amp;rel=0&amp;modestbranding=0&amp;showinfo=0&amp;autoplay=1&amp;controls=0&enablejsapi=1" frameborder="0" allowfullscreen="" style="width:305px; outline: 5px solid #fff; background:#000; margin:0 0 0 4px; padding:0"></iframe>');
  $("#c1 > img").hide();
});

$("#c2").on('click',function(){
  $(this).html('<iframe id="video01" width="100%" height="100%" src="http://www.youtube.com/embed/1bdtSFxBYW0?list=&amp;wmode=opaque&amp;rel=0&amp;modestbranding=0&amp;showinfo=0&amp;autoplay=1&amp;controls=0&enablejsapi=1" frameborder="0" allowfullscreen="" style="width:305px; outline: 5px solid #fff; background:#000; margin:0 0 0 4px; padding:0"></iframe>');
  $("#c2 > img").hide();
});

$("#c3").on('click',function(){
  $(this).html('<iframe id="video01" width="100%" height="100%" src="http://www.youtube.com/embed/Js_Jv5EzOv0?list=&amp;wmode=opaque&amp;rel=0&amp;modestbranding=0&amp;showinfo=0&amp;autoplay=1&amp;controls=0&enablejsapi=1" frameborder="0" allowfullscreen="" style="width:305px; outline: 5px solid #fff; background:#000; margin:0 0 0 4px; padding:0"></iframe>');
  $("#c3 > img").hide();
});

和$("#c3 > img").style.display = "none";只是为了一对夫妇，但没有任何效果。

非常感谢您的帮助。

Answer 1

很酷的问题要解决。我从来没有玩过 SlickJS，但据我所知，它对视频控件没有任何作用。为此，我建议查看 YouTube IFrame API (https://developers.google.com/youtube/iframe_api_reference)。您可以调用 player.pauseVideo() 函数在单击 next/previous 按钮时暂停视频。这也将清除 JS 中的 HTML 替换。

我快找到解决方案了；但我的电池快没电了 (%)。我会尝试在明天早上完成。

Answer 2

这是一个快速代码笔，显示了 YouTube IFrame API 控制 starting/pausing 视频的一些用法：http://codepen.io/ccaspanello/pen/RWZqXb

var currentPlayer;

$('#c1').on('click',function(){
    var player = new YT.Player('c1', {
        width: '305',
        videoId: 'c07DH4HY2CA',
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
    currentPlayer = player;
});

// Other Videos Here

function onPlayerReady(event) {
    event.target.playVideo();
}

function onPlayerStateChange(event){
    if (event.data == YT.PlayerState.PLAYING) {
        currentPlayer = event.target;
    }
}

请注意，生成视频的 onclick 操作可以合并到函数中。我没有花时间这样做。如果您需要帮助，我可以提供帮助；但我可能要到今晚晚些时候才能帮上忙。

关于预告片神秘回归。看起来 SlickJS 正在克隆内容，因此一旦用户点击轮播的末尾，它就可以 "loop" 它们。用户点击预览后生成 YouTube 视频；您可能需要触发一个事件来刷新克隆的对象。

Slick JS 视频轮播暂停 YouTube 视频，并永久隐藏占位符图像

SlickJS Video Carousel Pause YouTube Video, And Hide Placeholder Image Permanently

javascript

youtube-api

carousel

slick.js