我有一个跑马灯幻灯片,我想让当你点击下一张幻灯片时,前一张幻灯片上的YouTube视频停止播放。
我的目标是检测div元素是否应用了display:block样式。如果是,则在用户单击下一个/上一个时停止视频播放。
下面是我的jQuery代码:
我的目标是检测div元素是否应用了display:block样式。如果是,则在用户单击下一个/上一个时停止视频播放。
下面是我的jQuery代码:
$('.bxslider').bxSlider({
video: true,
useCSS: false,
pagerCustom: '#bx-pager'
});
$('.bxslider li .videoImage').click(function() {
$('.videoImage').fadeOut('slow', function() {
$(".videoContainer").show();
});
$('#playerID').get(0).stopVideo();
});
if($('.videoContainer').css('display') == 'block')
{
$('.bx-controls-direction a').click(function() {
$('#video').get(0).stopVideo();
});
}
HTML:
<div class="bx-viewport">
<ul class="bxslider">
<li>
<div class="videoImage">
<img src="http://placekitten.com/920/500"/>
</div>
<div class="videoContainer">
<iframe id="video" width="560" height="315" src="http://www.youtube.com/embed/g3J4VxWIM6s" frameborder="0" allowfullscreen></iframe>
</div>
</li>
<li>
<div class="videoImage">
<img src="http://placekitten.com/920/500"/>
</div>
<div class="videoContainer">
<iframe src="http://player.vimeo.com/video/17914974" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
</li>
</ul>
</div>
<div class="bx-controls bx-has-controls-direction">
<div class="bx-controls-direction">
<a class="bx-prev" href="">Prev</a>
<a class="bx-next" href="">Next</a>
</div>
</div>
onSlideBefore
选项,设置一个回调函数来检查当前幻灯片是否包含视频并停止它。 - Boaz