CODEWITHSUNDEEP
javascripthtmlslick.js
truslivii.lev
truslivii.lev

Reputation: 701

add autoplay for video in slick carousel

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 (

Upvotes: 20

Views: 15590

Answers (5)

Dario Zadro
Dario Zadro

Reputation: 1284

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.

Upvotes: 1

user3746025
user3746025

Reputation: 41

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

Upvotes: 4

Pranay kumar
Pranay kumar

Reputation: 2197

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

Upvotes: 0

manish1706
manish1706

Reputation: 1599

You Can Just get the id from the video tag and 

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

Upvotes: 0

Kalyan Kumar S
Kalyan Kumar S

Reputation: 214

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

Upvotes: 0

Related Questions