将Javascript动态应用于slick.js Slider中的视频 [英] Appying Javascript dynamically to videos within a slick.js Slider

问题描述

Fiddle Here

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

Is it possible to have javascript that pauses a slide containing video for that video to play to completion on a specific slide #N instead apply to any slide containing an <video>?

我现在有这段代码在这个例子达到＃5时暂停幻灯片：

I currently have this code to pause the slide when it reaches #5 for this example:

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

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

And this code to resume the slide once the video finishes playing:

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

我想要做的是在我的滑块中包含更多视频，并在每个视频中暂停一下滑块播放视频而不是仅在特定幻灯片上播放视频：

What I would like to do is include more videos in my slider and have the slider pause at each one to play the video instead of only on a specific slide like it is doing here:

if (currentSlide == 5) {

幻灯片6有视频但不包含在上面的代码中。如果幻灯片有一个视频类，我宁愿让代码检测。
这是这个问题的延续。

Slide 6 has a video but is not included in the above code for example. I would rather have the code detect if the slide has a video class for example. This is a continuation of this question.

推荐答案

而不是

if (currentSlide == 5)

你可以在每个上添加一个递增的类你的幻灯片，并检查这里面的内容。
html将如下所示：

you can add an incremented class on each of your slides, and check what is inside in this if. the html will looks like this:

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

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

You ll probably then know if you have a node video in your current slide.

希望这有助于

这篇关于将Javascript动态应用于slick.js Slider中的视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！