javascript - 播放视频时暂停 Bootstrap 轮播

Question

我有多张包含视频和图片的幻灯片。轮播设置为加载时自动播放。但是，当有人播放视频并将鼠标移出侧面时，它会一直滑动(正如预期的那样)。

如何跟踪视频的播放和暂停时间？我搜索了 Stack Overflow，但没有找到类似的问题。

站点管理员稍后会添加视频，因此它们可以是 iframe 或 html5 视频。因此，我需要一个适用于两者的解决方案。

Answer 1

这对我有用，可以在播放原生 HTML5 视频时暂停 Bootstrap 轮播，并在视频暂停或播放完毕后再次播放。我是一个完全的 JS 新手，但我四处搜索并将一些东西串在一起。我可能犯了一个错误(可能)，但它对我有用。

我没有通过 ID 调用视频，因为我希望该操作适用于轮播中播放的任何视频。我的箱子里有一些。

请注意更改轮播的 ID 以匹配您的 ID。

<script>
$('video').on('play', function (e) {
    $("#portfolioCarousel").carousel('pause');
});
$('video').on('stop pause ended', function (e) {
    $("#portfolioCarousel").carousel();
});
</script>