Bootstrap carousel using <video> tag & wordpress loop

Hi,

I have a Wordpress site built with Bootstrap and I have a carousel on the home page which has video files in it. The carousel is populated using advanced custom fields repeater field.

Currently there are 3 rows in the field giving me 3 slides.

My problem is the three videos are all playing at the same time, and not when the slide loads or is given the active class.

I've tried all sorts of javascript to get it to work but I'm not getting the result I want.

Here's the HTML for the video output:

<video loop controls="true" id="video<?php echo $video++; ?>">
   <source src="<?php the_sub_field('mp4'); ?>" type="video/mp4">
   <source src="<?php the_sub_field('ogg'); ?>" type="video/ogg">
   <source src="<?php the_sub_field('webm'); ?>" type="video/webm">
   Your browser does not support the video tag.
</video>

I disabled autoplay as I want to control the video behaviour with javascript. I added a php counter to the ID so I could target each row individually.

My javascript in theme.js as follows:

jQuery(function($) {
    $('#home-carousel').carousel({
        interval: 1000 * 5
    });
    $('#home-carousel > div > .item:first').addClass('active');
});

jQuery(function($) {    
    if ($("#video0").length) {
        $("#video0")[0].play();
    }
    if ($("#video1").length) {
        $("#video1")[0].play();
    }
    if ($("#video2").length) {
        $("#video2")[0].play();
    }
});

So I'm making sure the first row gets assigned the active class so we can see it when the page loads, then I'm checking to see if the video file is present and if it is, play it.

I'm stuck on how to get it to play only when the slide becomes active, rather than playing in the background on a loop all the time.

Any help?

Thanks Michael