暂停Bootstrap轮播播放视频时 [英] Pausing Bootstrap carousel When a Video playing

问题描述

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

I have multiple slide with videos and images. Carousel is set to autoplay when loaded. But when someone plays a video and move mouse out of the side it keeps sliding ( as expected ).

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

How do I keep track of when a video is playing and pause? I have search around SO but didn't find similar question.

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

Site admin will add video later on so they could be iframe or html5 video. So, I need a solution that works for both.

推荐答案

这对于我来说，当原生HTML5视频暂停Bootstrap轮播时正在播放并在视频暂停或完成播放时再次播放。我是JS的新手，但是我一起搜索并串起了几件事。我可能犯了一个错误（可能），但它对我有用。

This worked for me to pause the Bootstrap carousel when a native HTML5 video is playing and play it again when a video is paused or done playing. I'm a total JS novice but I searched around and strung a few things together. I may have made a mistake (likely) but it works for me.

我不会通过ID调用视频，因为我希望该操作适用于在旋转木马中播放的任何视频。在我的情况下我有一些。

I am not calling videos by IDs because I want the action to work on any video playing in the carousel. I have a few in my case.

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

Note to change the ID of the carousel to match yours.

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

这篇关于暂停Bootstrap轮播播放视频时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！