使用最新版本的Twitter Bootstrap，并通过iframe嵌入Vimeo视频...我在BootSnipp（Extend Carousel）的帮助下构建了一个简单的轮播，而不是放置图像缩略图，我添加了视频。但是，我遇到了一个问题......当你播放第一个视频并点击另一个视频时，第一个视频继续播放。我需要在点击其他视频时停止播放视频。
许多其他与YouTube合作的帖子和我在Vimeo上看过的帖子似乎都没有帮助。
答案 0 :(得分：4)
我没有使用过BootSnipp，但以下内容适用于vanilla Bootstrap。
当Bootstrap轮播滑到下一张幻灯片时，您需要使用Vimeo JavaScript API手动暂停视频。这是最简单的使用Vimeo的Froogaloop library。
给每个Vimeo播放器<iframe>一个唯一的id，将该id作为“player_id”传递，为Bootstrap的"slide.bs.carousel" event添加一个监听器（在Bootstrap v3.0中;我相信这只是{{1}在v2.3.2中），并在相应的Vimeo播放器上调用Froogaloop.api（“pause”）。
在轮播中创建Vimeo幻灯片时，每个Vimeo播放器都应遵循此基本设置（为清楚起见，我不包括除"slide"和id以外的任何选项/属性;请注意{{ 1}}是src属性中必需的查询变量，用于激活Vimeo JavaScript API）：
api=1（其中N是一些唯一的id，可能是你的迭代器索引。）
（编辑： 此技术不需要src和<iframe id="player-id-N" src="http://player.vimeo.com/video/yourVideoIDHere?player_id=player-id-N&api=1"></iframe>
，但根据您的设置，它仍然有用。）
创建轮播后，将处理程序绑定到幻灯片事件：
<iframe> id Here's a working JSFiddle不使用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");
});
，如上文编辑中所述。