jquery 在光滑滑块内自动播放视频

6vl6ewon 于 2023-02-18 发布在 jQuery

关注(0)|答案(3)|浏览(129)

我使用从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>

jquery

来源：https://stackoverflow.com/questions/43227657/autoplay-a-video-within-slick-slider

3条答案

按热度按时间

sgtfey8w1#

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

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

赞(0）回复(0）举报 2023-02-18

vecaoik12#

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

是的，可以使用JavaScript完成。当视频幻灯片变成currentSlide时，您必须：
1.暂停滑块
1.播放视频
您可以使用afterChange事件执行此操作：

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

赞(0）回复(0）举报 2023-02-18

pepwfjgg3#

需要将视频静音，自动播放才能工作。

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

赞(0）回复(0）举报 2023-02-18

我来回答

jquery 在光滑滑块内自动播放视频

3条答案

相关问题

热门标签

最新问答