javascript - 将 Javascript 动态应用到 slick.js Slider 中的视频

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');
                }
            }
            });

我想要做的是在 slider 中包含更多视频，并让 slider 在每个视频处暂停以播放视频，而不是像此处那样仅在特定幻灯片上播放:

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();
          }
        });

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

希望这会有所帮助