嗨,当我在 slider 内使用 YouTube 剪辑时,我无法让光滑的轮播 (http://kenwheeler.github.io/slick/) 停止自动播放。
有人说我可以使用 onAfterChange 但仍然不知道如何在视频打开时关闭自动播放(请注意,这是当鼠标不在视频上时)
这是我正在使用的代码,任何帮助都会很好:)
$("#slider").slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
dots: true,
autoplay: true,
autoplaySpeed: 7000,
infinite: true
});
/* **************************************** *
* Youtube API
* Create player
* **************************************** */
var player;
window.onYouTubePlayerAPIReady = function() {
$("#player").hide();
var player_id = 'player';
var $player = jQuery('#'+player_id);
var parent = $player.parent();
player = new YT.Player(player_id, {
videoId: 'HevnOuJY1TM',
height: parent.height(),
width: '100%',
playerVars: {
'autoplay': 0,
'controls': 0,
'rel' : 0,
'disablekb' : 0,
'modestbranding' : 1,
'showinfo': 0,
'html5': 1
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
var sizeVideo = _.debounce(function() {
player.setSize('100%', parent.height());
}, 500);
jQuery(window).on('load resize', sizeVideo);
jQuery(window).trigger('resize');
};
function onPlayerReady() {
$("#slide-video").on("click", function() {
$(this).css('background','transparent');
$("#player").show();
player.playVideo();
});
}
function onPlayerStateChange(event) {
if(event.data === 0) {
$(".countdown").fadeIn();
}
if(event.data === 1) {
$(".countdown").fadeOut();
}
if(event.data === 2) {
$(".countdown").fadeIn();
}
if( 1 === event || 2 === event || 3 === event) {
$('#slider')
.slick('slickPause')
.slick('slickSetOption', 'autoplay', false, true);
} else {
$('#slider').slick('slickPlay')
.slick('slickSetOption', 'autoplay', true, true);
}
}
});
最佳答案
我找到了解决问题的方法:
function onPlayerReady() {
$("#slide-video").on("click", function() {
$(this).hover(function(){
slider.slick('slickPause');
});
$(this).css('background','transparent');
$("#player").show();
player.playVideo();
});
}
function onPlayerStateChange(event) {
if(event.data === 0 || event.data === 2) {
$(".countdown").fadeIn();
}
if(event.data === 1) {
$(".countdown").fadeOut();
}
if( 1 === event.data || 2 === event.data || 3 === event.data) {
slider.slick('slickPause');
} else {
slider.slick('slickPlay');
}
}
这对我在 chrome 和 Safari 上有效。. Firefox 不起作用,而 IE 我无法尝试,因为我不是在 PC 上而是在 MAC 上,但这就是为什么我添加了悬停功能,以防有人想要将鼠标放在那里?
更新:好的,它现在适用于所有...它只是在您暂停视频然后在 slider 消失后恢复它,一旦它不再使用 slickPause 功能。
关于jquery - Slick-carousel 如何在通过 youtube api 打开视频时停止自动播放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30071623/