Bootstrap -- Wait For The Video To Finish Before Sliding To The Next Carousel

I want my carousel to wait for the video to finish before going to the next slide. This is my code, I'm looping it according to the number of media files in my database. &l

Solution 1:

document.getElementById will only return the first element it found.

try to find your handler with all the video element using the following code.

<script type="text/javascript">
    $("#mediaCarousel").carousel({ interval: false}); // this prevents the auto-loop
    var videos = document.querySelectorAll("video.d-block");
    videos.forEach(function(e) {
        e.addEventListener('ended', myHandler, false);
    }); 

    function myHandler(e) {
        $("#mediaCarousel").carousel('next');
    }
</script>