我有以下BXSlider的例子,其中我有4张幻灯片,每张幻灯片都有一个Youtube视频。问题是,当我播放视频并转到下一张幻灯片时,它会继续播放:
http://jsfiddle.net/isherwood/XWL9Y/
$(document).ready(function () {
$('.bxslider').bxSlider();
});
有人可以帮忙让 youtube 视频在转到下一张幻灯片时暂停吗?
var slider = $("#gallery").bxSlider({
adaptiveHeight:true,
auto:true,
autoStart:true,
autoControls:true,
video:true,
onSlideAfter: function(slide){
if (slide.find("iframe:first").length) {
slider.stopAuto();
}
}
});
你也可以使用像slide.find("div.fluid-width-video-wrapper:first"(这样的东西,如果你在滑块中使用iframe来做其他事情。
源
----更新----
var slider = $('.bxslider').bxSlider({
onSlideAfter: function(slide, oldindex, currentSlide){
oldSlide = $( '.bxslider > li:nth-child(' + (oldindex+1) + ')');
youtubeVideo = oldSlide.find('iframe[src*=youtube]');
if ( youtubeVideo.length ) {
youtubeVideo.get(0).contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}','*');
}
}
});
源
----编辑----
还要确保将?enablejsapi=true
添加到 iframe src 中,否则上述 JavaScript 将不起作用(源(。
经过长时间的搜索,我找到了解决方案。试试这个:
onSlideAfter: function(){
jQuery("iframe").each(function() {
var src= jQuery(this).attr('src');
jQuery(this).attr('src',src);
});
}
这将停止所有视频。它基本上是重置视频网址。