Остановить карусель при воспроизведении видео - Bootstrap 4

Question

Я создаю карусель Bootstrap (4) для некоторых видео (не только), и мне бы хотелось, чтобы она остановилась при воспроизведении видео (с автоматическим воспроизведением) и продолжилась в конце видео.

Я знаю, что есть много похожих тем, но все это 1-3 года назад (начальная загрузка 3/2), и сейчас ничего не работает ...

Это мой пример HTML-кода

<div id="mediaCarousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <video autoplay width="100%"><source src="video1.mp4"></video>
         </div>
    <div class="carousel-item">
        <img class="d-block w-100" src="image1.jpg" alt="Second slide">
     </div>
     <div class="carousel-item">
         <img class="d-block w-100" src="image2.jpg" alt="Third slide">
    </div>
</div>

Пример того, что я пробовал и видел большую часть времени:

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

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

Заранее спасибо!;)