Appying Javascript dynamically to videos within a slick.js Slider

Question

Fiddle Here

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>?

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) {

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.

Answer 1

instead of

if (currentSlide == 5)

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>

for example you ll do :

            $('.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.

hope this will help