javascript - 单击停止视频幻灯片

Question

如何让简单的幻灯片脚本在有人点击幻灯片时暂停？

我有一个使用此脚本循环播放的 Youtube 视频幻灯片:

setInterval() { 
$('#videoSlides > div:first')
.fadeOut(0)
.next()
.fadeIn(2000)
.end()
.appendTo('#videoSlides');
},  15000);};

HTML 如下(容器 div，外加 3 个子 div，每个子 div 包含一个嵌入的 youtube 视频):

<div id="videoSlides">
<div class="videoSlide"><iframe src="http://www.youtube.com/embed/VideoID"></iframe></div>
<div class="videoSlide"><iframe src="http://www.youtube.com/embed/VideoID"></iframe></div>
<div class="videoSlide"><iframe src="http://www.youtube.com/embed/VideoID"></iframe>
</div>
</div>

因此，当幻灯片在 3 个视频之间切换时，如果有人点击了其中一个视频，则该幻灯片应该停在该幻灯片上。我该如何做到这一点？

Answer 1

虽然其他答案都指向正确的方向，但您应该注意另一件事:从嵌入式 YouTube 播放器捕获点击事件并不像建议的那么容易，因为点击事件不会传播到播放器之外。

一个简单的解决方法是改用 mouseenter 事件，如下所示:

$('#videoSlides').mouseenter(function() {
    clearInterval(interval);
});

但这可能不会产生您想要的行为。

另一种更复杂的方法是使用 youtube 播放器 api 来捕捉视频开始时的状态变化。您可以找到更多信息in the docs .

我整理了一个例子jsfiddle (不要忘记先在 HTML 部分插入您的视频 ID!)