Pause and resume slick slider once video finishes

Question

I have a slick.js slider that contains video and I want the slider to pause once it reaches a video slide and resume cycling once the video finishes without user interaction. I can get this functionality to work with the first video in a cycle but on the second video slide, the slider will not resume once the video completes.

Fiddle

I have a console log that writes out when the video completes but it won't say anything once the second video completes. I believe it is not seeing the function to play the slick slider.

            function myHandler(e) {         
            console.log('Video Complete')
            $('.sliderMain').slick('slickPlay');
        }

Answer 1

You were only binding the first video tag to your myHandler function:

// It only gets the first element
var video = document.getElementsByTagName('video')[0];
video.addEventListener('ended',myHandler,false);

Since you're using jQuery, you can bind an event when the videos have ended like that:

$('video').on('ended',function(){           
    console.log('Video Complete')
    $('.sliderMain').slick('slickPlay');
});

jQuery demo

The JavaScript equivalent would be so:

var videos = document.getElementsByTagName('video');

for (var i=0; i<videos.length; i++) {
    videos[i].addEventListener('ended',myHandler,false);
}

JavaScript demo

Answer 2

SlickSlider is responsive and needs to work 360 (across all devices). Your solution will not work on mobile, since autoplay of a video is forbidden.

Also this solution allows multiple videos to be playing at once, which is sub-optimal.

A better solution would be to pause the carousel only when the video is played by the user, and resume the carousel (pausing the video) when a slide is detected.