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 (

Hindemith

You want all of the videos to play on the page load or just the one in the center? – Sheaves

only just one in the center. I'm now reading about using afterChange but can't understand how to use it in my case. – Hindemith

Does the following post help you on that matter? #31522263 – Monocot

Answer 1

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

Shirk

Answer 2

You can add muted to the video tag to autoplay in all browsers. Also, playsinlineis needed to autoplay on mobile devices.

<video autoplay muted playsinline></video>

I know this doesn't help if your video has sound, but having sound immediately play on the initial page load is probably not preferred anyway.

Hernandez

Answer 3

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

Microclimate

Answer 4

You Can Just get the id from the video tag and

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

Slither

Answer 5

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 '$'.

Thermocline