Javascript SlickJS视频转盘暂停YouTube视频,并永久隐藏占位符图像

Javascript SlickJS视频转盘暂停YouTube视频,并永久隐藏占位符图像,javascript,youtube-api,carousel,slick.js,Javascript,Youtube Api,Carousel,Slick.js,这是密码笔: 总结 这是一个带有视频转盘的广告,使用SlickJS 只有3个YouTube视频,但Slick有一个我们正在使用的无限选项 问题 1.我需要占位符img在单击时永久隐藏(包括克隆)。 2.我需要YouTube视频暂停在scroll prev/next(包括克隆)上。 3.我也很想整合这方面的最终代码 当前,该占位符在单击时消失,但当您滚动时,它会重新出现(取决于您单击的占位符和滚动的方向) 我猜在SlickJS的某个地方,它正在将图像放回原处。我不知道它在Slick的什么地方这样做

这是密码笔:

总结 这是一个带有视频转盘的广告,使用SlickJS

只有3个YouTube视频,但Slick有一个我们正在使用的
无限
选项

问题 1.我需要占位符
img
在单击时永久隐藏(包括克隆)。 2.我需要YouTube视频暂停在scroll 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();
});
$(“#c1”)。在('click',function()上{
$(this.html(“”);
$(“#c1>img”).hide();
});
$(“#c2”)。在('click',function()上{
$(this.html(“”);
$(“#c2>img”).hide();
});
$(“#c3”)。在('click',function()上{
$(this.html(“”);
$(“#c3>img”).hide();
});
$(“#c3>img”).style.display=“无”只是为了吸引一对夫妇,但没有任何效果


我提前感谢您的帮助。

很酷的问题需要解决。我从来没有玩过SlickJS,但从我的阅读来看,它与视频控制没有任何关系。为此,我建议查看YouTube IFrame API()。单击“下一步/上一步”按钮时,可以调用
player.pauseVideo()
函数暂停视频。这也将清理JS中的HTML替换


我接近一个解决方案;但是我的电池快没电了。明天早上我会试着做完

下面是一个快速代码笔,展示了YouTube IFrame API控制视频启动/暂停的一些用法:

请注意,用于生成视频的onclick操作可以合并为函数。我没有花时间这么做。如果你需要帮助,我可以帮你;但我可能要到今晚晚些时候才能帮上忙


关于神秘回归的预告片。看起来SlickJS正在克隆内容,以便在用户点击旋转木马末端时可以“循环”这些内容。用户点击预览后生成YouTube视频;您可能需要触发一个事件来刷新克隆对象。

这太棒了。我花了一些时间才明白我需要使用YouTube API。上一个项目我不需要它,但这一个不同。我并不总是在寻找一个解决方案。通常我只需要把它解开。我不能告诉你我有多感激你随时都可以。总是乐于助人!
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;
    }
}