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

Bohi

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

Steiermark

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.

Georganngeorge

This is going to be playing hands free on a television so user input will not be necessary nor will displaying it on a mobile device. Thanks for your concern though! – Bohi

Sort of defeats the purpose of using a responsive carousel, which are very constrained. It might behoove you to write a customized carousel for TV, which pauses the video between slides. Having multiple videos running at once off screen is still an issue for you. – Georganngeorge

This I have done, since the slideshow is not interactive, the video will finish before the next slide plays. Nothing runs off screen. – Bohi

Answer 3

This works also on mobile devices. Just make sure, you don't serve a video tag on mobile. Before outputting your slide via PHP template, just check the user agent and serve a fallback image instead. Then use this for your video/autoplay/resume issue:

$('.homepage .hero-slider').on('afterChange', function(event, slick, currentSlide, nextSlide) {
        var $active = $('.slick-slide.slick-current.slick-active');
        var video = $active.find('video');
        if (video.length == 1) {
            var $slickInstance = $(this);
            // play() only works with a valid id as selector :)
            var video = document.getElementById(video.attr('id'));
            video.play();
            $slickInstance.slick('slickPause');
            video.addEventListener('ended', function () {
                $slickInstance.slick('slickPlay');
            }, false);

        }
    });

Cyclone