是否可以将slick.js与html5自托管视频一起使用,在没有用户交互的情况下播放和暂停视频？
我目前有以下代码,有一个带有垂直光滑幻灯片的双滑块和一个主要部分,大图像和视频将出现并自动滚动.这将在电视上托管,因此不会有用户互动.
WelcomeTV Screen Site
如何在幻灯片播放完成后将幻灯片完全播放,播放完毕后,继续播放幻灯片并无限期重复播放.视频可能包含各种长度,因此需要动态检测长度.
我尝试在this question上实现代码但是我无法让我的示例正常工作.
<div id="slideBox">
<!--Sidebar-->
<div class="sliderSidebar">
<div><img src="http://placehold.it/200x100"></div>
<div><img src="http://placehold.it/200x100"></div>
<div><img src="http://placehold.it/200x100"></div>
<div><img src="http://placehold.it/200x100"></div>
<div><img src="http://placehold.it/200x100"></div>
<div><img src="http://placehold.it/200x100/C8102E/FFFFFFF?text=Video" /></div>
</div>
<div id="main-image" class="sliderMain">
<div><img src="http://placehold.it/900x500"></div>
<div><img src="http://placehold.it/900x500"></div>
<div><img src="http://placehold.it/900x500"></div>
<div><img src="http://placehold.it/900x500"></div>
<div><img src="http://placehold.it/900x500"></div>
<div id="slide-video">
<video autoplay loop width="900px">
<source src="video/SampleVideo.mp4" />
</video>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.sliderMain').slick({
slidesToShow: 1,slidesToScroll: 1,arrows: false,fade: true,asNavFor: '.sliderSidebar',autoplay: true,autoplaySpeed: 3000,onAfterChange : function() {
player.stopVideo();
}
});
$('.sliderSidebar').slick({
slidesToShow: 5,asNavFor: '.sliderMain',dots: false,centerMode: false,focusOnSelect: true,vertical: true,arrows: false
});
var video = $('.sliderMain .slick-active').find('video').get(0).play();
$('.sliderMain').on('afterChange',function(event,slick,currentSlide,nextSlide){
$('.sliderMain .slick-slide').find('video').get(0).pause();
var video = $('.sliderMain .slick-active').find('video').get(0).play();
});
});
</script>
Demo
解决方法
是的,可以使用JavaScript完成.
当视频幻灯片成为currentSlide时,您需要：
当视频幻灯片成为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;
}
<div id="slideBox">
<!--Sidebar-->
<div class="sliderSidebar">
<div><img src="http://placehold.it/200x100"></div>
<div><img src="http://placehold.it/200x100"></div>
<div><img src="http://placehold.it/200x100"></div>
<div><img src="http://placehold.it/200x100"></div>
<div><img src="http://placehold.it/200x100"></div>
<div><img src="http://placehold.it/200x100/C8102E/FFFFFFF?text=Video" /></div>
</div>
<div id="main-image" class="sliderMain">
<div><img src="http://placehold.it/900x500"></div>
<div><img src="http://placehold.it/900x500"></div>
<div><img src="http://placehold.it/900x500"></div>
<div><img src="http://placehold.it/900x500"></div>
<div><img src="http://placehold.it/900x500"></div>
<div id="slide-video">
<video width="900px" id="theVideo">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" />
</video>
</div>
</div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick-theme.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.min.js"></script>