SlickJS视频旋转木马暂停YouTube视频，并永久隐藏占位符图像

Question

CodePen: http://codepen.io/frankDraws/pen/RWgBBw

总结这是一个带有视频旋转木马的广告，使用了SlickJS。

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

问题1. 我需要占位符img永久隐藏点击(包括克隆)。2. 我需要YouTube视频暂停滚动前/下一个(包括克隆)。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

这是一个快速的代码笔，显示了一些使用YouTube IFrame API来控制视频的开始/暂停: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正在克隆内容，这样一旦用户点击旋转木马的末尾，它就可以"循环"它们。用户点击预览后生成YouTube视频;您可能需要触发一个事件来刷新克隆对象。

Answer 2

很酷的问题。我从来没有玩过SlickJS，但从我读到的是它不做任何视频控制。为此，我建议查看YouTube IFrame API (https://developers.google.com/youtube/iframe_api_reference)。点击"下一步"/"上一步"按钮时，可以调用player.pauseVideo()函数暂停视频。这也将清理JS中的HTML替换。

我接近解决方案了;但是我的电池快没电了。我争取明天早上完成。