将 Javascript 动态应用于 slick.js 滑块中的视频

Question

Fiddle Here

是否可以让 javascript 暂停包含视频的幻灯片，以便该视频在特定幻灯片 #N 上播放到完成，而不是应用于任何包含 <video> 的幻灯片？

我目前有此代码在此示例中达到 #5 时暂停幻灯片：

            $('.sliderMain').on('afterChange', function(event, slick, currentSlide){
          if (currentSlide == 5) {
          $('.sliderMain').slick('slickPause');
          theVideo.play();

这段代码在视频播放完毕后恢复幻灯片：

document.getElementById('theVideo').addEventListener('ended',myHandler,false);
                function myHandler(e) {
                 $('.sliderMain').slick('slickPlay');
                }
            }
            });

我想做的是在我的滑块中包含更多视频，并让滑块在每个视频处暂停以播放视频，而不是像这里那样只在特定幻灯片上播放：

if (currentSlide == 5) {

幻灯片 6 有一个视频，但不包含在例如上面的代码中。例如，我宁愿让代码检测幻灯片是否有视频类。 这是this question.的延续@

Answer 1

而不是

if (currentSlide == 5)

您可以在每张幻灯片上添加一个递增的类，并检查此 if 中的内容。 html 将如下所示：

            <div class="slide1"><img src="http://placehold.it/900x500"></div>
        <div class="slide2"><img src="http://placehold.it/900x500"></div>
        <div class="slide3"><img src="http://placehold.it/900x500"></div>
        <div class="slide4"><img src="http://placehold.it/900x500"></div>
        <div class="slide5"><img src="http://placehold.it/900x500"></div>

        <div class="slide6" id="slide-video">
            <video width="900px" height="500px" class="theVideo">
                <source src="http://vjs.zencdn.net/v/oceans.mp4" />
            </video>

例如你会这样做：

            $('.sliderMain').on('afterChange', function(event, slick, currentSlide){
          if ($('.slide'+currentSlide+ ' video').length != 0){
            $('.sliderMain').slick('slickPause');
            theVideo.play();
          }
        });

然后您可能会知道当前幻灯片中是否有节点视频。

希望这会有所帮助