Jquery 单击下一个旋转木马幻灯片时停止YouTube视频播放

我有一张旋转木马幻灯片，我正在尝试制作它，以便当你点击下一张幻灯片时，上一张幻灯片上的YouTube视频停止播放

我试图做的是检测

div

是否应用了

display:block

。然后，如果是这样，当用户单击next/prev时，视频停止

以下是我的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:

就像评论中提到的@Boaz一样。您应该在回调之前使用onslide

$('.bxslider').bxSlider({
  video: true,
  useCSS: false,
  pagerCustom: '#bx-pager',
  onSlideBefore: beforeSlide
});

function beforeSlide($slideElement, $curIndex, $nextIndex) {
  //find the youtube player DOM element and call the .stopVideo method on the element 
}

Youtube API文档（

player.stopVideo（）

）：

bxSlider文档（

onSlideBefore

）：

您可能应该使用设置回调函数，检查当前幻灯片是否包含视频，然后停止播放。

$('.bxslider').bxSlider({
  video: true,
  useCSS: false,
  pagerCustom: '#bx-pager',
  onSlideBefore: beforeSlide
});

function beforeSlide($slideElement, $curIndex, $nextIndex) {
  //find the youtube player DOM element and call the .stopVideo method on the element 
}