javascript - 视频结束后如何再次播放光滑的滑块
问题描述
如果幻灯片出现在视频上,我想播放它,完成后它应该再次滑动。在这里我可以播放视频,但在视频结束后无法再次滑动。
$(".main-slide").slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
dots: true,
autoplay: true,
autoplaySpeed: 2000,
})
$('.main-slide').on('afterChange', function(event, slick, currentSlide) {
var vid = $(slick.$slides[currentSlide]).find('.embed-video');
if (vid.length > 0) {
$('.main-slide').slick('slickPause');
$(vid).get(0).play();
}
});
var videos = document.getElementsByTagName('iframe');
for (var i=0; i<videos.length; i++) {
videos[i].addEventListener('ended',myHandler,false);
}
function myHandler(e) {
$('.main-slide').slick('slickPlay');
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<div class="main-slide">
<div class="banner-image image slide1">
<img src="images/banner.jpg" />
</div>
<div class="banner-image image slide2">
<iframe class = "embed-video" id = "theVideo" src="https://www.youtube.com/embed/NsZ2nwWRH5c?rel=0&autoplay=1&controls=0&showinfo=0&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
</div>
<div class="banner-image image slide3">
<iframe class = "embed-video" id = "theVideo" src="https://www.youtube.com/embed/NsZ2nwWRH5c?rel=0&autoplay=1&controls=0&showinfo=0&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
</div>
</div>
视频结束
解决方案
推荐阅读
- python - 芹菜+芹菜工人的问题
- javascript - fullCalendar 资源未显示
- go - 如何从 IP 获取系统接口名称
- django - 如何仅本地化数字?
- javascript - 当我在 Chrome 中打开一个 THREE.js 应用程序时,我的浏览器拖得很糟糕
- java - 如果返回 Http 401 再次调用 API
- python - Scrapy 如何在 Jupyter notebook 上工作?
- excel - 删除 Excel 中单元格值在其他行中不重复的行
- python - 如何使用`import`调用文件夹中的一组脚本?
- ms-access - 您可以对子表单中的计算字段求和吗?