自動播放光滑滑塊內的視頻

我使用的是從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

自動播放光滑滑塊內的視頻

回答

相關問題