Question

我试图通过标签在多章中整合四个vimeo视频。（按标签显示一个多章的视频）但是，当我移动到下一个标签时，视频继续播放......

我想如果有可能当我点击下一个标签时停止上一个标签的视频+当我点击项目章节列表（在这个新标签上）时视频播放。

我的代码：

＆＃13;

enter code here

＆＃13;

＆＃13; user_access("Administer pmo_lessons_learned")

任何解决方案？谢谢。

Answer 1

为了达到此效果，您需要将events引导标签组合在一起，并对您的Vimeo视频管理pause和play效果。

1）引导标签事件

Bootstrap标签事件从他们的文档中触发了几个事件：

显示新标签时，事件按以下顺序触发：


hide.bs.tab（在当前活动标签上）

show.bs.tab（在待显示的标签上）

hidden.bs.tab（在上一个活动选项卡上，与hide.bs.tab事件相同）

shown.bs.tab（在新活动的刚刚显示的选项卡上，与show.bs.tab事件相同）

因此，为了捕获这些事件，您需要一个简单的jQuery：

JS：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    // You have access to both tabs
  var previousActiveTabId = $(e.relatedTarget).attr('href');
  var newlyActivatedTabId = $(e.target).attr('href');

  // More stuff below
}

2）现在您有了要激活的标签和前一个标签，要停止/播放视频，我建议您使用包含多个实用程序的Vimeos's JavaScript SDK。但是出于自己的缘故，你可以做到这样的事情：

增加了之前的JS：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    // You have access to both tabs
  var previousActiveTabId = $(e.relatedTarget).attr('href');
  var newlyActivatedTabId = $(e.target).attr('href');

    // Now you can stop the video like this
    var playerToPause = new Vimeo.Player($(previousActiveTabId).find('iframe')[0]);
  playerToPause.pause();

  var playerToPlay = new Vimeo.Player($(newlyActivatedTabId).find('iframe')[0]);
  playerToPlay.play();

});

这应该可以解决问题，我已经使用This Fiddle, check it out and see if it helps you对此进行了测试。

多标签引导程序与vimeo章节

1 个答案: