完成后光滑的滑块幻灯片视频
slick slider slide video when finished
我正在使用 slick slider 来创建英雄块,我有一个 vimeo 视频和一个我想自动滑动的图像,我可以正常工作。我想要实现的是,当幻灯片到达 vimeo 视频时,滑块会停止自动播放,直到视频播放完毕,然后再次开始自动播放幻灯片。
这是我对滑块的基本 html:
<div id="main-image" class="sliderMain">
<div>
<iframe id="video" class="embed-player slide-media" src="https://player.vimeo.com/video/273725261?api=1&byline=0&portrait=0&title=0&background=1&mute=1&loop=0&autoplay=1&id=273725261" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div>
<img src="http://foley13.webfactional.com/grid-website/wp-content/uploads/2018/06/o-FRIENDS-facebook.jpeg">
</div>
</div>
这是我的 Javascript 让滑块工作:
$('.sliderMain').on('afterChange', function(event, slick, currentSlide) {
var vid = $(slick.$slides[currentSlide]).find('oembed');
if (vid.length > 0) {
$('.sliderMain').slick('slickPause');
$(vid).get(0).play();
}
});
$('oembed').on('ended',function(){
console.log('Video Complete')
$('.sliderMain').slick('slickPlay');
});
$(document).ready(function(){
$('.sliderMain').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
fade: true,
autoplay: true,
autoplaySpeed: 1000
});
});
我添加了可用的 afterChange 功能,但光滑的滑块自动播放速度让它看起来好像不起作用,因此视频幻灯片在视频播放完毕之前滑动。您可以在此处查看示例:http://foley13.webfactional.com/grid-website/
因为没有oembed
元素,你在afterChange
事件中搜索
我不确定 .play()
函数是如何工作的,但 SO 代码段似乎有问题。这就是为什么我无法测试它是否正常工作的原因。无论如何,将 oembed
更改为 iframe
因为那肯定是错误的。
同时将 slick 保存为变量,这样您就不会进行过多 jQuery 不必要的调用。
下面的例子
$(document).ready(function() {
var $slider = $('.sliderMain').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
fade: true,
autoplay: true,
autoplaySpeed: 1000
});
$slider.on('afterChange', function(event, slick, currentSlide) {
var vid = $(slick.$slides[currentSlide]).find('iframe');
if (vid.length > 0) {
$slider.slick('slickPause');
$(vid).get(0).play();
}
});
$('iframe').on('ended', function() {
console.log('Video Complete')
$slider.slick('slickPlay');
});
});
我正在使用 slick slider 来创建英雄块,我有一个 vimeo 视频和一个我想自动滑动的图像,我可以正常工作。我想要实现的是,当幻灯片到达 vimeo 视频时,滑块会停止自动播放,直到视频播放完毕,然后再次开始自动播放幻灯片。
这是我对滑块的基本 html:
<div id="main-image" class="sliderMain">
<div>
<iframe id="video" class="embed-player slide-media" src="https://player.vimeo.com/video/273725261?api=1&byline=0&portrait=0&title=0&background=1&mute=1&loop=0&autoplay=1&id=273725261" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div>
<img src="http://foley13.webfactional.com/grid-website/wp-content/uploads/2018/06/o-FRIENDS-facebook.jpeg">
</div>
</div>
这是我的 Javascript 让滑块工作:
$('.sliderMain').on('afterChange', function(event, slick, currentSlide) {
var vid = $(slick.$slides[currentSlide]).find('oembed');
if (vid.length > 0) {
$('.sliderMain').slick('slickPause');
$(vid).get(0).play();
}
});
$('oembed').on('ended',function(){
console.log('Video Complete')
$('.sliderMain').slick('slickPlay');
});
$(document).ready(function(){
$('.sliderMain').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
fade: true,
autoplay: true,
autoplaySpeed: 1000
});
});
我添加了可用的 afterChange 功能,但光滑的滑块自动播放速度让它看起来好像不起作用,因此视频幻灯片在视频播放完毕之前滑动。您可以在此处查看示例:http://foley13.webfactional.com/grid-website/
因为没有oembed
元素,你在afterChange
事件中搜索
我不确定 .play()
函数是如何工作的,但 SO 代码段似乎有问题。这就是为什么我无法测试它是否正常工作的原因。无论如何,将 oembed
更改为 iframe
因为那肯定是错误的。
同时将 slick 保存为变量,这样您就不会进行过多 jQuery 不必要的调用。
下面的例子
$(document).ready(function() {
var $slider = $('.sliderMain').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
fade: true,
autoplay: true,
autoplaySpeed: 1000
});
$slider.on('afterChange', function(event, slick, currentSlide) {
var vid = $(slick.$slides[currentSlide]).find('iframe');
if (vid.length > 0) {
$slider.slick('slickPause');
$(vid).get(0).play();
}
});
$('iframe').on('ended', function() {
console.log('Video Complete')
$slider.slick('slickPlay');
});
});