jquery - Twitter Bootstrap 轮播中的视频不会停止播放

Question

使用最新版本的 Twitter Bootstrap，并通过 iframe 嵌入 Vimeo 视频...我在 BootSnipp(扩展轮播)的帮助下构建了一个简单的轮播，我没有放置图像缩略图，而是添加了视频。但是，我遇到了一个问题......当您播放第一个视频并单击另一个视频时，第一个视频会继续播放。我需要在单击另一个视频时停止视频。

许多其他帖子涉及 YouTube，而我见过的有关 Vimeo 的帖子似乎没有帮助。

Answer 1

我没有使用过 BootSnipp，但以下内容适用于普通 Bootstrap。

您需要使用Vimeo JavaScript API当 Bootstrap 轮播滑到下一张幻灯片时手动暂停视频。这是最简单的使用 Vimeo 的 Froogaloop library .

给每个 Vimeo 播放器<iframe>一个唯一的 id，将该 id 作为“player_id”传递，将监听器添加到 Bootstrap 的 "slide.bs.carousel" event (在 Bootstrap v3.0 中；我相信这只是 v2.3.2 中的 "slide")，并在相应的 Vimeo 播放器上调用 Froogaloop.api("pause")。

在轮播中创建 Vimeo 幻灯片时，每个 Vimeo 播放器都应遵循此基本设置(为了清楚起见，我没有包含除 id 和 src 之外的任何选项/属性；注意 api=1 是必需的src 属性中的查询变量以激活 Vimeo JavaScript API):

<iframe id="player-id-N" src="http://player.vimeo.com/video/yourVideoIDHere?player_id=player-id-N&api=1"></iframe>

(其中 N 是某个唯一的 ID，可能是您的迭代器索引。)

(编辑: <iframe> id 和 player_id 对于此技术来说不是必需的，但根据您的设置仍然可能有用。)

创建轮播后，将处理程序绑定(bind)到幻灯片事件:

$myCarousel.on("slide.bs.carousel", function (event) {
    // Bootstrap carousel marks the current slide (the one we're exiting) with an 'active' class
    var $currentSlide = $myCarousel.find(".active iframe");

    // exit if there's no iframe, i.e. if this is just an image and not a video player
    if (!$currentSlide.length) { return; }

    // pass that iframe into Froogaloop, and call api("pause") on it.
    var player = Froogaloop($currentSlide[0]);
    player.api("pause");

});

Here's a working JSFiddle不使用 <iframe> id或player_id ，如上面编辑中所述。