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