我正在使用 http://kenwheeler.github.io/slick/为了狂欢。但问题是即使正在播放 youtube 视频,自动播放也会将 slick 滑动到下一个。
目前我正在使用下面的 JS,但似乎没有任何效果。
$('#main-slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 3000,
dots: true,
infinite: true,
adaptiveHeight: true,
arrows: false
});
var video = $('#main-slider .slick-active').find('iframe').get(0).play();
$('#main-slider').on('afterChange', function(event, slick, currentSlide, nextSlide){
$('#main-slider .slick-slide').find('video').get(0).pause();
var video = $('#main-slider .slick-active').find('video').get(0).play();
});
类似的问题很少,但都没有解决方案。 Slick-carousel how to stop autoplay when video is on via youtube api
最佳答案
请在这里找到解决方案:
fiddle :http://jsfiddle.net/rijokpaul/pyzpg7st/2/
我用 YouTube Iframe API 解决了它
var tag = document.createElement('script');
tag.id = 'iframe-demo';
tag.src = 'https://www.youtube.com/iframe_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
var elems1 = document.getElementsByClassName('yt-player');
for(var i = 0; i < elems1.length; i++) {
player = new YT.Player(elems1[i], {
events: {
//'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
}
function onPlayerReady(event) {
}
function handleVideo(playerStatus) {
if (playerStatus == -1) {
// unstarted
$('#main-slider').slick('slickPause');
} else if (playerStatus == 0) {
// ended
$('#main-slider').slick('slickPlay');
} else if (playerStatus == 1) {
// playing = green
$('#main-slider').slick('slickPause');
} else if (playerStatus == 2) {
// paused = red
$('#main-slider').slick('slickPlay');
} else if (playerStatus == 3) {
// buffering = purple
} else if (playerStatus == 5) {
// video cued
}
}
function onPlayerStateChange(event) {
handleVideo(event.data);
}
$(function() {
$('#main-slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 3000,
pauseOnFocus: false,
pauseOnHover: false,
dots: true,
infinite: true,
adaptiveHeight: true,
arrows: false
});
});
$('#main-slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
$('.yt-player').each(function(){
this.contentWindow.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*')
});
});
还像下面这样更新了 iframe
<iframe class="yt-player" src="https://www.youtube.com/embed/lqj-QNYsZFk?controls=1&rel=0&enablejsapi=1"></iframe>
在 iframe url 的末尾添加了 &enablejsapi=1
并使用了一个名为 yt-player
的类。
更新
注释了 onReady
函数并使用 slick
beforeChange
事件在 YouTube 视频不活动时暂停。
关于jquery - 光滑的旋转木马 : Pause the Slick autoplay when youtube video is playing,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47301432/