在光滑的轮播中为视频添加自动播放

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 (

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

Answer 2

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

Answer 3

您可以从视频标签中获取 id 并

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

Answer 4

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

Answer 5

For the first video, you can add muted to the video tag to autoplay in all browsers.

<video autoplay muted></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.

For subsequent videos, you can use the afterChange event:

$('#your-slider-id').on('afterChange', function(event, slick, currentSlide, nextSlide){
  $('video').each(function() {
    $(this).get(0).pause();
  });
  if( $('.slick-current').find('video').length !== 0 ) {
    $(this).find('video').get(0).play();
  }
});