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

【问题标题】：Stop YouTube video playing when next carousel slide clicked单击下一张轮播幻灯片时停止 YouTube 视频播放
【发布时间】：2014-10-05 12:42:50
【问题描述】：

我有一张轮播幻灯片，我正在尝试制作它，以便当您点击下一张幻灯片时，上一张幻灯片上的 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>

【问题讨论】：

您应该使用onSlideBefore option 设置一个回调函数来检查当前幻灯片是否包含视频，然后将其停止。

标签： jquery carousel slide

【解决方案1】：

就像 cmets 中提到的 @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

【讨论】：