Fiddle Here
是否可以使用JavaScript暂停包含视频的幻灯片,以便该视频在特定幻灯片#N上播放至完整,而不是应用于包含<video>
的任何幻灯片?
对于此示例,当前我有以下代码可以在幻灯片到达#5时暂停它:
$('.sliderMain').on('afterChange', function(event, slick, currentSlide){
if (currentSlide == 5) {
$('.sliderMain').slick('slickPause');
theVideo.play();
视频播放完毕后,以下代码可恢复幻灯片的播放:
document.getElementById('theVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
$('.sliderMain').slick('slickPlay');
}
}
});
我想做的是在滑块中包含更多视频,并让滑块在每个视频播放器处暂停播放,而不是像在此处那样仅在特定的幻灯片上播放:
if (currentSlide == 5) {
幻灯片6有视频,但是没有包含在上面的代码中。我宁愿让代码检测幻灯片是否具有视频类。
这是this question.的延续
最佳答案
代替
if (currentSlide == 5)
您可以在每张幻灯片上添加一个递增的类,并检查其中是否包含内容。
html看起来像这样:
<div class="slide1"><img src="http://placehold.it/900x500"></div>
<div class="slide2"><img src="http://placehold.it/900x500"></div>
<div class="slide3"><img src="http://placehold.it/900x500"></div>
<div class="slide4"><img src="http://placehold.it/900x500"></div>
<div class="slide5"><img src="http://placehold.it/900x500"></div>
<div class="slide6" id="slide-video">
<video width="900px" height="500px" class="theVideo">
<source src="http://vjs.zencdn.net/v/oceans.mp4" />
</video>
例如,您将做:
$('.sliderMain').on('afterChange', function(event, slick, currentSlide){
if ($('.slide'+currentSlide+ ' video').length != 0){
$('.sliderMain').slick('slickPause');
theVideo.play();
}
});
然后,您可能会知道当前幻灯片中是否有节点视频。
希望这会有所帮助
关于javascript - 动态地将Javascript应用于slick.js Slider中的视频,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/31539311/