如何在引导选项卡之间切换时让视频开始播放?

Question

当我在引导选项卡之间切换时，如何让视频开始播放？

$('#tab').on('click', function() {
$('.active').find('video').each(function() {
$('#video').play();
});
});

Answer 1

要实现此目的，您可以挂接到 Bootstrap 在显示选项卡时触发的事件：shown.bs.tab。然后，您可以在上一个标签的视频上呼叫stop()，同时在当前标签的视频上拨打start()。试试这个：

$('#tab').on('shown.bs.tab', function(e) {
// start videos in new tab
$(e.target).find('video').each(function() {
this.play();
});
// stop videos in old tab
$(e.relatedTarget).find('video').each(function() {
this.stop();
});
});

有关"引导"选项卡事件的更多信息，请参见文档

Answer 2

如果您想返回旧选项卡并从上次中断的地方继续，要添加到 rorys 答案

，您可以$('#video').pause()

Answer 3

不要使用 ID。 如果使用 ID 选择器，jQuery 只返回单个元素(只会选择 DOM 中第一个匹配的元素)。使用这个：

$('#tab a').on('click', function () {
$('#tab .active').find('video').each(function (video) {
$(video).get(0).play();
});
});

阅读此内容。