Pause and resume slider after video ends
I have a slick.js slider that contains a video and I want the slider to stop as soon as it reaches the video slide and resume the loop after the video ends without user interaction. I can get this functionality to work on the first video in the loop, but on the second slide, the video slider won't resume after the video ends.
I have a console log that is written when the video finishes, but it doesn't say anything after the second video finishes. I believe the slider play function is not seeing.
function myHandler(e) {
console.log('Video Complete')
$('.sliderMain').slick('slickPlay');
}
source to share
You only bound a tag video
to your function myHandler
:
// It only gets the first element
var video = document.getElementsByTagName('video')[0];
video.addEventListener('ended',myHandler,false);
Since you are using jQuery, you can bind an event when the video is finished like this:
$('video').on('ended',function(){
console.log('Video Complete')
$('.sliderMain').slick('slickPlay');
});
The JavaScript equivalent would be:
var videos = document.getElementsByTagName('video');
for (var i=0; i<videos.length; i++) {
videos[i].addEventListener('ended',myHandler,false);
}
source to share
SlickSlider is responsive and should work 360 (on all devices). Your solution will not work on mobile devices as autoplaying videos is prohibited.
Also, this solution allows you to play several videos at once, which is not optimal.
A better solution would be to pause the carousel only when the video is being played by the user, and resume the carousel (pause the video) when a slide is detected.
source to share