Jquery 带vimeo章节的多选项卡引导

我试图通过标签将vimeo的四个视频整合到多个章节中。（一个多章视频标签） 但当我转到下一个选项卡时，视频将继续播放

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

我的代码：

jQuery（函数（$）{
var iframe=document.getElementById（'thevideo'）；
var player=$f（iframe）；
$（'.timecode'）。在（'click'，函数（e）上{
e、 预防默认值（）；
var seekVal=$（this.attr（'data-seek'）；
player.api（'seekTo'，seekVal）；
});
});
//@sourceURL=pen.js

为了实现这一效果，您需要将引导选项卡触发的

事件

与Vimeo视频上的

暂停

和

播放

效果相结合

1）引导选项卡事件

引导选项卡事件从其文档中触发几个事件：

显示新选项卡时，事件按以下顺序触发：

• hide.bs.tab（在当前活动选项卡上）
• show.bs.tab（在待显示选项卡上）
• hidden.bs.tab（在上一个活动选项卡上，与hide.bs.tab事件相同）
• show.bs.tab（在刚刚显示的新活动选项卡上，与show.bs.tab事件相同）

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

JS:

2）现在您有了将要激活的选项卡和上一个选项卡，可以停止/播放我建议您使用的包含多个实用程序的视频。但为了我的缘故，你可以做这样的事情：

增强了以前的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();

});

---

我已经用测试过了。

@JulienMichaud我的替代方案对你有用吗？你还在经历问题吗？你好，不要为我工作（你可以在顶部看到我的回答。

$('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();

});