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

单击下一个旋转木马滑动时停止播放YouTube视频

1 个答案: