Question

如果幻灯片出现在视频上我想要播放它并在完成后它应该再次滑动。我可以播放视频但在视频结束后无法再将其滑回。

＆＃13;

$(".main-slide").slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    dots: true,
    autoplay: true,
    autoplaySpeed: 2000,

})

$('.main-slide').on('afterChange', function(event, slick, currentSlide) {
var vid = $(slick.$slides[currentSlide]).find('.embed-video');        
    if (vid.length > 0) {
        $('.main-slide').slick('slickPause');
        $(vid).get(0).play();
    }
});

var videos = document.getElementsByTagName('iframe');
for (var i=0; i<videos.length; i++) {
    videos[i].addEventListener('ended',myHandler,false);
}
function myHandler(e) {			

    $('.main-slide').slick('slickPlay');
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<div class="main-slide">
    <div class="banner-image image slide1">		
      <img src="images/banner.jpg" />		
    </div>
    <div class="banner-image image slide2">		
      <iframe class = "embed-video" id = "theVideo" src="https://www.youtube.com/embed/NsZ2nwWRH5c?rel=0&amp;autoplay=1&amp;controls=0&amp;showinfo=0&amp;enablejsapi=1" frameborder="0" allowfullscreen></iframe>		
    </div>
    <div class="banner-image image slide3">		
					<iframe class = "embed-video" id = "theVideo" src="https://www.youtube.com/embed/NsZ2nwWRH5c?rel=0&amp;autoplay=1&amp;controls=0&amp;showinfo=0&amp;enablejsapi=1" frameborder="0" allowfullscreen></iframe>		
		</div>
</div>

＆＃13;

视频结束

如何在视频结束后再次播放光滑的滑块

0 个答案: