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.

Hurried

not sure about the requirement. Can you explain little more? – Coup

I updated my question. Thanks for your assistance. – Hurried

Clearly Explain the requirement please... your sample code looks incomplete – Vannavannatta

I have updated the fiddle to show another example. I apologize if it wasn't clean enough. – Hurried

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

Pizzeria

i just edited my answer which might be more complete now – Pizzeria

Thanks so much for the assistance Nicolas! I tried implementing this solution, but I believe it is not detecting the video tag now to pause the slider. I have updated my fiddle here with your update. Fiddle – Hurried

you forgot a space before video in the selector $('.slide'+currentSlide+ ' video') – Pizzeria

and by the way you need to define your video dynamically as we did with the divs for the line document.getElementById('theVideo').addEventListener('ended',myHandler,false); i d suggest you to loop on a class and add event listenner on every video found – Pizzeria

I suppose I'm just not following as the slider doesnt pause when it reaches the video slide with a defined class like you demonstrated. Thanks for your help and direction towards a solution. – Hurried