jquery - 单击下一张轮播幻灯片时停止播放 YouTube 视频

Question

我有一张轮播幻灯片，我正在尝试使其在您单击下一张幻灯片时，上一张幻灯片上的 YouTube 视频停止播放。

我想要做的是检测 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>

Answer 1

就像评论中提到的@Boaz。您应该使用 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 
}

Youtube API 文档 (player.stopVideo()): https://developers.google.com/youtube/js_api_reference?csw=1#Playback_controls

bxSlider 文档 (onSlideBefore): http://bxslider.com/options#onSlideBefore