BXSlider 切换幻灯片时暂停 Youtube 视频
BXSlider Pause Youtube Video When Switching Slides
我有以下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);
});
}
这将停止所有视频。它基本上是重置视频网址。
相关文章:
- Youtube Javascript API播放/暂停/停止不工作
- YouTube暂停,播放&停止不工作
- 暂停HTML5视频,如果它是使用空格键像youtube互动
- 暂停YouTube视频,youtube api
- 使用 javascript 或 jquery 暂停 youtube 视频
- YouTube嵌入 - 播放/暂停播放
- BXSlider 切换幻灯片时暂停 Youtube 视频
- 使用youtube API中的按钮播放和暂停iframe视频
- 播放Soundcloud嵌入时暂停Youtube嵌入
- 暂停/播放多个嵌入式youtube播放器
- 当使用javascript onblur时,在Iframe中暂停youtube和/或vimeo视频
- 可以´t关闭灯箱,停止/暂停嵌入的youtube视频(youtubeapi)
- 如何在隐藏iframe时暂停YouTube播放器
- 在父元素的悬停出口动态实例化/暂停Youtube视频(iFrame API)
- 当页面被隐藏时,暂停youtube视频
- SlickJS视频旋转木马暂停YouTube视频,并永久隐藏占位符图像
- 当用户滚动离开时,我如何暂停youtube嵌入
- 如何在控制台中播放和暂停Youtube视频
- 暂停youtube和vimeo编程,并检测视频是否正在播放
- 这个脚本如何暂停youtube视频