javascript - Pausing Bootstrap carousel When a Video playing

Question

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 ).

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

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

Answer 1

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.

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.

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>