1

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

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

4

1 回答 1

4

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

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

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

在轮播中创建 Vimeo 幻灯片时，每个 Vimeo 播放器都应遵循此基本设置（为清楚起见，我不包括除idand之外的任何选项/属性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，可能是您的迭代器索引。）

（编辑： and对这种技术来说不是必需的，但根据您的设置仍然可能有用。<iframe> idplayer_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");

});

这是一个不使用<iframe> idor的工作 JSFiddleplayer_id，如上面编辑中所述。

于 2013-08-24T07:17:44.567 回答