Bootstrap Carousel Start/Stop Video on Slide

[jarvis]

Hi All,

I have a Bootstrap (v4) carousel. It has numerous slides but one slide has a video. For example:

<div class="carousel-item" data-interval="10000">
	<video id="player" loop>
		<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4"><br>
		Your browser does not support the video tag.
	</video>
	<div class="carousel-caption d-md-block">
		<h3 data-animation="animated flipInX">
		This is the caption for slide 4
		</h3>
	</div>
</div>

What I'm trying to do, is set the video to play only when you're on that slide (active) and pause when you either scroll away (via a click on the carousel arrows/indicators or the carousel interval).

Therefore, I will use the event functionality (https://getbootstrap.com/docs/4.0/components/carousel/#events). As I'm using HTML 5 video tags, this is my solution:

$('#carousel').carousel().on('slide.bs.carousel',function(){
	$('.carousel-item').find('video').each(function(){
		this.pause();
	});
});	
$('#carousel').carousel().on('slide.bs.carousel',function(){
	$('.carousel-item active').find('video').each(function(){
		this.play();
	});
});		

Unfortunately, it doesn't seem to work but I can't see why? Am I missing something very obvious??

Many thanks in advanced

[Dana]

Hi. I am trying to achieve something similar in react. did u manage to figure it out? 😁

Thanks