Twitter Bootstrap 轮播中的视频不会停止播放答案

【问题标题】：Videos within a Twitter Bootstrap carousel, doesn't stop playingTwitter Bootstrap 轮播中的视频不会停止播放
【发布时间】：2013-07-17 18:07:25
【问题描述】：

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

许多其他与 YouTube 相关的帖子以及我在 Vimeo 上看到的帖子似乎都没有帮助。

【问题讨论】：

请发布您的代码。更好的是，使用 JSFiddle 创建一个示例，以便其他人可以使用它并可能更快地帮助您。

标签： jquery twitter-bootstrap

【解决方案1】：

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

当 Bootstrap 轮播滑到下一张幻灯片时，您需要使用 Vimeo JavaScript API 手动暂停视频。这是使用 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 对于此技术不是必需的，但根据您的设置仍然可能有用。）

创建轮播后，将处理程序绑定到幻灯片事件：

$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，如上面 EDIT 中所述。

【讨论】：

你这个摇滚老兄！谢谢你，正是我需要的。