自动播放光滑滑块内的视频

我使用的是从http://kenwheeler.github.io/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>

来源

2017-04-05 JDCov87

似乎自动播放对我有用。 – Ionut

[Slick.js和html5视频自动播放和视频暂停]的可能重复（https://stackoverflow.com/questions/31521763/slick-js-and-html5-video-autoplay-and-pause-on-video） –

我引用@AsafDavid。看看original answer中的工作代码示例。

是的，它可以使用JavaScript来完成。当视频幻灯片成为 currentSlide你必须：
$('.sliderMain').on('afterChange', function(event, slick, currentSlide){ 
    if (currentSlide == 5) { 
    $('.sliderMain').slick('slickPause'); myVideo.play(); 
    } 
}); 

来源

2017-04-05 10:04:52

：

暂停滑块
播放视频

您可以使用afterChange事件做到这一点

您可以使用afterChange回调函数来实现这一点。

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

来源

2017-04-05 10:05:41

自动播放光滑滑块内的视频

回答

相关问题