add autoplay for video in slick carousel

Question

I use slick carousel http://kenwheeler.github.io/slick/ on my page and now I need to add video with autoplay in it.
I use this code
HTML

<div class="main-slider" id="main-slider">
            <div>
                <div class="video-wrapper">
                    <video autoplay loop class="pageBackground-video">
                        <source src="/Content/video/332145276.mp4" type="video/mp4">
                    </video>
                </div>
            </div>
            <div>
                <div class="video-wrapper">
                    <video autoplay loop class="pageBackground-video">
                        <source src="/Content/video/332145276.mp4" type="video/mp4">
                    </video>
                </div>
            </div>          
        </div>

and script

$('#main-slider').slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      autoplay: true,
      autoplaySpeed: 30000,
      dots: true,
      infinite: true,
      adaptiveHeight: true,
      arrows: false
  });

but autoplay doesn't work. Is there any way to make autoplay work?

upd I tried to use

$('#main-slider').on('afterChange', function(event, slick, currentSlide, nextSlide){
  var video = currentSlide.children('video').get(0).play();
});

but I get an error Uncaught TypeError: currentSlide.children is not a function because currentSlide it's just a number (0,1,etc). How to get current element?

upd2 I used this code and it works

$('#main-slider').on('afterChange', function(event, slick, currentSlide, nextSlide){
    $('#main-slider .slick-slide').find('video').get(0).pause();
    var video = $('#main-slider .slick-active').find('video').get(0).play();
});

but now autoplay work for all video perfectly but only after first slick changes. How to make it work for the first video after page only loaded.

upd3 I used this code

 var video = $('#main-slider .slick-active').find('video').get(0).play();

  $('#main-slider').on('afterChange', function(event, slick, currentSlide, nextSlide){
    $('#main-slider .slick-slide').find('video').get(0).pause();
    var video = $('#main-slider .slick-active').find('video').get(0).play();
});

and now all work as I want but I'm afraid my code is ugly (

You want all of the videos to play on the page load or just the one in the center? — Zac.Ledyard, Apr 27 '15 at 16:32
only just one in the center. I'm now reading about using `afterChange` but can't understand how to use it in my case. — truslivii.lev, Apr 27 '15 at 16:39
Does the following post help you on that matter? https://stackoverflow.com/questions/31521763/slick-js-and-html5-video-autoplay-and-pause-on-video?rq=1 — Zhephard, Dec 26 '19 at 16:03

score 2 · Answer 1 · answered Mar 04 '20 at 13:29

You can use functions from the slick docs.

// On slide change, pause all videos
$('#main-slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  $('video').each(function() {
    $(this).get(0).pause();
  });
});

// On slide chnage, play a video inside the current slide
$('#main-slider').on('afterChange', function(event, slick, currentSlide, nextSlide){
  if( $('.project-slide.slick-current').find('video').length !== 0) {
    $("#main-slider .slick-current video")[0].play();
  }
});

score 0 · Answer 2 · answered May 02 '15 at 18:46

this line of code

$('#main-slider .slick-slide').find('video').get(0).pause();

inside afterChange call back function will pause all the video's present in the slide container irrespective of the video playing or not.

If there are 100 slides, it pauses all 100 videos though they are not playing. Its better you find the previous slide and pause only the video in that slide

score 0 · Answer 3 · answered May 22 '16 at 14:21

0

You Can Just get the id from the video tag and

$("#videotagId").pause();

answered May 22 '16 at 14:21

manish1706

1,411
21
20

score 0 · Answer 4 · answered Feb 10 '20 at 07:58

You can update your following codes. It will work.


$('#main-slider').on('afterChange', function(event, slick, currentSlide, nextSlide){
  var video = $($(currentSlide.children('video')).get(0)).play();
});

get() method doesn't return jquery object. It returns Javascript object so in order to use any jquery function you have to make it a jquery object by wrapping it inside the '$'.

add autoplay for video in slick carousel

4 Answers4

Linked