图片/视频滑块暂停问题

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));
}
});
});