Question

我的图像/视频滑块运行良好。但是，在视频结尾处，您可以看到它暂停一秒钟后才滑动。我知道这是由于自动速度设置引起的，但是我不太确定如何克服这个问题，因为我希望所有幻灯片之间保持1秒钟的时间。我该如何解决这个问题？

$(document).ready(function() {
  $('.sliderMain').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    asNavFor: '.sliderSidebar',
    autoplay: true,
    autoplaySpeed: 1000
  });

  $('.sliderMain').on('afterChange', function(event, slick, currentSlide) {
    var vid = $(slick.$slides[currentSlide]).find('video');
    if (vid.length > 0) {
      $('.sliderMain').slick('slickPause');
      $(vid).get(0).play();
    }
  });

  var videos = document.getElementsByTagName('video');

  for (var i = 0; i < videos.length; i++) {
    videos[i].addEventListener('ended', myHandler, false);
  }

  function myHandler(e) {
    console.log('Video Complete')
    $('.sliderMain').slick('slickPlay');
  }
});

#slideBox {
  width: 1300px;
  max-height: 500px;
  overflow: hidden;
  margin: 1% auto;
  position: relative;
  top: 1em;
  background-color: #54585A;
  border-radius: .3em;
}

<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.5.6/slick.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.5.6/slick.css" />
<div id="slideBox">
  <div id="main-image" class="sliderMain">
    <div><img src="http://placehold.it/900x500"></div>
    <div id="slide-video">
      <video preload autoplay width="900px" height="500px" id="theVideo">
        <source src="http://project-progress.co.uk/Background-Slider-Plugin-jQuery-sliderResponsive/video.mp4" />
      </video>
    </div>
  </div>
</div>

小提琴在这里：-https://jsfiddle.net/rjwbq62u/2/

Answer 1

$(document).ready(function(){

       // $.each($('video'), function(index, obj){

         //obj.onended = function(e) //{$('.sliderMain').slick('slickPlay');}

        //obj.('ended',function(){});

       // });



        $('.sliderMain').slick({
            slidesToShow: 1,
            slidesToScroll: 1,
            arrows: false,
            fade: true,
            asNavFor: '.sliderSidebar',
            autoplay: true,
            autoplaySpeed: 1000
        });
        $('.sliderMain').on('afterChange', function(event, slick, currentSlide) {
            var vid = $(slick.$slides[currentSlide]).find('video');
            if (vid.length > 0) {                   
                $('.sliderMain').slick('slickPause');
                      $(vid).get(0).play();
            setTimeout(function(){$('.sliderMain').slick('slickPlay');
            }, (vid.duration* 1000 + 1000));
            }
        });

    });

图片/视频滑块暂停问题

1 个答案: