在slick slider中自动播放视频

Question

我正在使用从http://kenwheeler.github.io/slick/下载的slick幻灯片插件。

我的一些图片自动播放，但我也有一个无法自动播放的mp4文件。这是我的HTML代码:

<section class="regular slider" style="width: 900px; left: 60px; top: 230px;">
    <div>        
        <video autoplay>
            <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
        </video>
    </div>
    <div>
      <img src="https://placehold.it/350x300?text=2">
    </div>
    <div>
      <img src="https://placehold.it/350x300?text=3">
    </div>
 </section>

这是我的脚本：

<script type="text/javascript">
    $(document).on('ready', function() {
      $(".regular").slick({
        dots: true,
        infinite: true,
        slidesToShow: 1,
        slidesToScroll: 1,
          autoplay: true,
          autoplaySpeed: 2000
      });
     });
  </script>

- JDCov87

---

对我来说，自动播放似乎是有效的。 - Ionut Necula

可能是以下问题的重复：Slick.js和html5视频自动播放和暂停视频。 - Gleb Kemarsky

Answer 1

视频需要静音才能自动播放。

<video autoplay muted>
     <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
</video>

- Justin

Answer 2

我引用@AsafDavid的话。请查看原始答案中的工作代码示例。

是的，可以使用JavaScript来完成。当视频幻灯片成为currentSlide时，您需要：

1. 暂停滑块
2. 播放视频

您可以使用afterChange事件来实现：

$('.sliderMain').on('afterChange', function(event, slick, currentSlide){ 
  if (currentSlide == 5) { 
    $('.sliderMain').slick('slickPause'); myVideo.play(); 
  } 
});

- Anand Choudhary

Answer 3

您可以使用afterChange回调函数来实现此功能。

$('.your-element').on('afterChange', function(event, slick, currentSlide, nextSlide){
    $('#video')[0].play(); 
});

- Rahul Kumar