Question

我在页面上使用光滑的轮播http://kenwheeler.github.io/slick/，现在我需要在其中添加带自动播放功能的视频。
我用这个代码
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>

和脚本

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

但是自动播放不起作用。有没有办法让自动播放工作？

UPD 我试着用

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

但我收到错误Uncaught TypeError: currentSlide.children is not a function因为currentSlide它只是一个数字（0,1等）。如何获取当前元素？

upd2 我使用了这段代码并且可以正常使用

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

但现在自动播放完全适用于所有视频但仅在首次光滑更改后才能使用。如何在仅加载页面后使其适用于第一个视频。

upd3 我使用了这段代码

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

现在所有的工作都按照我的要求进行，但我担心我的代码很难看（

Answer 1

您可以使用精美文档中的功能。

// 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

您可以从视频标记和

中获取ID

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

Answer 3

您可以更新以下代码。它将起作用。


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

get（）方法不返回jquery对象。它返回Javascript对象，因此，要使用任何jquery函数，必须将其包装在'$'内以使其成为jquery对象。

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

3 个答案: