暂停Bootstrap轮播播放视频时

Question

我有多个视频和图像幻灯片.Carousel设置为加载时自动播放.但是当有人播放视频并将鼠标移出侧面时,它会一直滑动(如预期的那样).

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

网站管理员稍后会添加视频,因此可能是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>