轻滑轮播：在YouTube视频播放时暂停轻松自动播放 [英] Slick Carousel : Pause the Slick autoplay when youtube video is playing
问题描述
我正在为carousal使用 http://kenwheeler.github.io/slick/ 。但问题是即使在播放YouTube视频时，自动播放功能也会将滑块滑到下一个位置。
目前我正在使用下面的JS，但似乎没有任何工作。
$ （
slidesToScroll：1，
自动播放：
$ p $ <'code> $（'＃main-slider' true，
autoplaySpeed：3000，
dots：true，
infinite：true，
adaptiveHeight：true，
arrows：false
}）;
var video = $（'＃main-slider .slick-active'）。find（'iframe'）。get（0）.play（）;
$ b $（'＃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如何通过youtube api停止自动播放视频
请在这里找到解决方案：
小提琴： http://jsfiddle.net/rijokpaul / pyzpg7st / 2 /
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;
函数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
}
}）;
}
}
函数onPlayerReady（event）{
}
函数handleVideo（playerStatus）{
if（playerStatus == -1 ）{
// unsarted
$（'＃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
}
}
函数onPlayerStateChange（event）{
handleVideo（event.data）;
$（$ {
$（'＃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'）。 （function（）{
this.contentWindow.postMessage（'{event：command，func：'''''pauseVideo'+'，args：}'，'* '）
}）;
}）;
同时更新iframe，如下所示：
< iframe class =yt-playersrc =https://www.youtube.com/embed/lqj-QNYsZFk?controls=1&rel=0&enablejsapi=1 >< / iframe中>
新增了& enablejsapi = 1 并且使用了一个名为 yt-player 的类。
更新
评论 onReady 函数并使用 slick beforeChange 事件可暂停YouTube视频。
I am using http://kenwheeler.github.io/slick/ for the carousal. But the problem is the autoplay slides the slick to next even when the youtube video is playing.
Currently I am using the below JS but nothing seems to work on it.
$('#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();
});
There are few similar question but none of them has a solution. Slick-carousel how to stop autoplay when video is on via youtube api
Please find the solution here:
Fiddle : http://jsfiddle.net/rijokpaul/pyzpg7st/2/
I solved it with 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":""}', '*')
});
});
Also updated iframe like the following
<iframe class="yt-player" src="https://www.youtube.com/embed/lqj-QNYsZFk?controls=1&rel=0&enablejsapi=1"></iframe>
Added &enablejsapi=1 at the end of iframe url and used a class called yt-player.
UPDATE
Commented onReady function and used slick beforeChange event to pause YouTube video when it is not active.
这篇关于轻滑轮播：在YouTube视频播放时暂停轻松自动播放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
