相关疑难解决方法(0)

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

我在我的页面上使用光滑的轮播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>
Run Code Online (Sandbox Code Playgroud)

和脚本

$('#main-slider').slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      autoplay: true,
      autoplaySpeed: 30000,
      dots: true,
      infinite: true,
      adaptiveHeight: true,
      arrows: false
  });
Run Code Online (Sandbox Code Playgroud)

但是自动播放不起作用.有没有办法让自动播放工作?

我尝试使用upd

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

但我得到一个错误,Uncaught TypeError: currentSlide.children is not a function因为currentSlide它只是一个数字(0,1等).如何获得当前元素?

upd2我使用这个代码,它的工作原理 …

html javascript slick.js

13
推荐指数
1
解决办法
8912
查看次数

在光滑的滑块中自动播放视频

我正在使用从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>
Run Code Online (Sandbox Code Playgroud)

这是我的脚本:

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

html video jquery autoplay slick.js

5
推荐指数
1
解决办法
2万
查看次数

标签 统计

html ×2

slick.js ×2

autoplay ×1

javascript ×1

jquery ×1

video ×1