5

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

3 Answers 3

5

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

0
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.

3
  • 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! Aug 26, 2015 at 19:51
  • 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. Aug 27, 2015 at 21:12
  • This I have done, since the slideshow is not interactive, the video will finish before the next slide plays. Nothing runs off screen. Sep 2, 2015 at 14:22
1

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

        }
    });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.