Slick.js和html5视频自动播放并暂停视频 [英] Slick.js and html5 video autoplay and pause on video
问题描述
是否可以将slick.js与html5自托管视频一起使用，在没有用户互动的情况下播放和暂停视频？
Is it possible to use slick.js with html5 self hosted videos, to play and pause a video without user interaction?
我目前有以下代码可供选择带有垂直光滑幻灯片的双滑块和主要部分，大图像和视频将显示并自动滚动。这将在电视上托管，因此不会有用户互动。
I currently have the following code to have a dual slider with a vertical slick slideshow and a main section where the large image and video will appear and scroll automatically. This will be hosted on a television so there will be no user interaction.
如何将包含视频的幻灯片完全播放，一旦完成，继续播放幻灯片并重复播放无限期。视频可能包含各种长度，因此需要动态检测长度。
How can I have the slide containing video play completely once it appears and once it finishes, continue the slideshow and repeat indefinitely. The videos may contain various lengths so it would need to detect the length dynamically.
我尝试在这个问题但是我无法让我的例子工作。
I tried implementing the code on this question however I was not able to get my example working.
<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>
推荐答案
是的，可以使用JavaScript完成。
当视频幻灯片时成为 currentSlide 你需要：
Yes it can be done using JavaScript.
When the video slide becomes the currentSlide you need to:
- 暂停滑块
- 播放视频
您可以使用slick.js事件执行此操作 afterChange ：
You can do this using the slick.js event afterChange:
$('.sliderMain').on('afterChange', function(event, slick, currentSlide){
if (currentSlide == 5) {
$('.sliderMain').slick('slickPause');
myVideo.play();
}
});
您还需要为视频结束添加事件监听器，以便将滑块命令为继续。你可以这样做：
You will also need to add an event listener for when to video ends in order to order the slider to continue. You can do so like this:
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
$('.sliderMain').slick('slickPlay');
}
如果您遇到此问题，请添加一个JSFiddle和我'我会尽力帮助你。
If you're having trouble with this, please add a JSFiddle and I'll try help you there.
编辑：这是一个工作 JSFiddle
$(document).ready(function() {
$('.sliderMain').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.sliderSidebar',
autoplay: true,
autoplaySpeed: 3000
});
$('.sliderSidebar').slick({
slidesToShow: 5,
slidesToScroll: 1,
asNavFor: '.sliderMain',
dots: false,
centerMode: false,
focusOnSelect: true,
vertical: true,
arrows: false
});
$('.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');
}
});
#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>
这篇关于Slick.js和html5视频自动播放并暂停视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
