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

【问题标题】：add autoplay for video in slick carousel在光滑的轮播中添加视频自动播放
【发布时间】：2015-04-27 16:30:05
【问题描述】：

我在我的页面上使用光滑的轮播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
  });

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

更新我尝试使用

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

现在一切都按我的意愿工作，但我担心我的代码很难看（

【问题讨论】：

您希望在页面加载时播放所有视频还是只播放中间的视频？
只有一个在中心。我现在正在阅读有关使用 afterChange 的信息，但不明白如何在我的情况下使用它。
以下帖子对您有帮助吗？ stackoverflow.com/questions/31521763/…

标签： javascript html slick.js

【解决方案1】：

您可以使用 slick 文档中的函数。

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

【讨论】：

【解决方案2】：

您可以在所有浏览器中将muted 添加到视频标签到autoplay。此外，在移动设备上自动播放需要playsinline。

<video autoplay muted playsinline></video>

我知道如果您的视频有声音，这无济于事，但在初始页面加载时立即播放声音可能不是首选。

【讨论】：

【解决方案3】：

这行代码

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

无论是否播放视频，afterChange 回调函数都会暂停幻灯片容器中的所有视频。

如果有 100 张幻灯片，它会暂停所有 100 个视频，尽管它们没有播放。最好找到上一张幻灯片并仅暂停该幻灯片中的视频

【讨论】：

【解决方案4】：

你可以从视频标签中获取 id 和

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

【讨论】：

【解决方案5】：

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


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

get() 方法不返回 jquery 对象。它返回 Javascript 对象，因此为了使用任何 jquery 函数，您必须通过将其包装在 '$' 中来使其成为 jquery 对象。

【讨论】：