javascript – 在slick转盘中添加自动播放视频

我在我的页面上使用光滑的旋转木马 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>

和脚本

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

但自动播放不起作用.有没有办法使自动播放工作？

UPD
我试过使用

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

但是我收到一个错误Uncaught TypeError：currentSlide.children不是一个函数,因为currentSlide它只是一个数字(0,1等).如何获取当前元素？

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

$('#main-slider').on('afterChange',nextSlide){
    $('#main-slider .slick-slide').find('video').get(0).pause();
    var video = $('#main-slider .slick-active').find('video').get(0).play();
});

但是现在自动播放完全可以为所有视频工作,但只有在第一次光滑的更改之后.如何使第一个视频只能加载页面.

upd3我用这个代码

var video = $('#main-slider .slick-active').find('video').get(0).play();

  $('#main-slider').on('afterChange',nextSlide){
    $('#main-slider .slick-slide').find('video').get(0).pause();
    var video = $('#main-slider .slick-active').find('video').get(0).play();
});

现在所有的工作都是我想要的,但我怕我的代码是丑的(

解决方法

这行代码

$(‘#main-slider .slick-slide’).find(‘video’).get(0).pause();

里面的afterChange回调功能将会暂停所有的视频在幻灯片容器中的存在,而不管视频播放.

如果有100张幻灯片,它会暂停所有100个视频,尽管它们没有播放.更好地找到上一张幻灯片,只能暂停该幻灯片中的视频

javascript – 在slick转盘中添加自动播放视频

解决方法

猜你在找的JavaScript相关文章