html5+video自动暂停,html5-video – Slick.js和html5视频自动播放和视频暂停

是的,可以使用JavaScript完成.

当视频幻灯片成为currentSlide时,您需要：

>暂停滑块

>播放视频

您可以使用slick.js事件在更改后执行此操作：

$('.sliderMain').on('afterChange',currentSlide){

if (currentSlide == 5) {

$('.sliderMain').slick('slickPause');

myVideo.play();

}

});

您还需要为视频结束添加事件侦听器,以便命令滑块继续.你可以这样做：

document.getElementById('myVideo').addEventListener('ended',myHandler,false);

function myHandler(e) {

$('.sliderMain').slick('slickPlay');

}

如果您遇到此问题,请添加一个JSFiddle,我会尽力帮助您.

编辑：这是一个工作JSFiddle

$(document).ready(function() {

$('.sliderMain').slick({

slidesToShow: 1,autoplaySpeed: 3000

});

$('.sliderSidebar').slick({

slidesToShow: 5,arrows: false

});

$('.sliderMain').on('afterChange',currentSlide) {

if (currentSlide == 5) {

$('.sliderMain').slick('slickPause');

theVideo.play();

}

});

document.getElementById('theVideo').addEventListener('ended',false);

function myHandler(e) {

$('.sliderMain').slick('slickPlay');

}

});

#slideBox {

width: 1300px;

max-height: 500px;

overflow: hidden;

margin: 1% auto;

position: relative;

top: 1em;

background-color: #54585A;

border-radius: .3em;

}

video {

background-color: black;

}

#slideBox .slick-vertical .slick-slide {

border: none;

}

.sliderSidebar {

width: 200px;

height: 500px;

float: left;

}

#slideBox .slick-vertical .slick-slide {

border: none;

}

.sliderMain {

width: 900px;

height: 500px;

position: relative;

float: left;

}