8
是否可以在html5自带视频中使用slick.js来播放和暂停视频而无需用户交互?Slick.js和html5视频在视频上自动播放和暂停
我目前有以下代码有一个垂直滑动幻灯片的双滑块和主要部分,大图像和视频将出现并自动滚动。这将在电视上托管,因此不会有用户交互。
我怎么能有一个包含完全一旦它出现视频播放幻灯片,一旦它完成,继续幻灯片和无限重复。视频可能包含各种长度,因此需要动态检测长度。
我试着在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,
slidesToScroll: 1,
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>
感谢您的帮助。我把这个小提琴放在一起。 [链接](https://jsfiddle.net/38oj9xrd/) 我试图实现你的代码,并跑进一个反复出现的问题,我得到这个消息: 遗漏的类型错误:$(...)戏不是功能 –
修复了一下代码+添加了我自己的工作JSFiddle –
非常感谢!这为我节省了很多头痛。相同/类似的解决方案是否适用于Youtube和Vimeo,还是我需要参考他们的API? –