Bootstrap 4 карусели с отсроченным автоматическим воспроизведением видео

Question

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

HTML

<div class="my-1 my-lg-5">
  <div id="main_carousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#main_carousel" data-slide-to="0" class="active"></li>
      <li data-target="#main_carousel" data-slide-to="1" ></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <video id="video_background" class="video-js vjs-16-9" poster="img/xxx.jpg" muted loop data-setup='{}'>
          <source src="xxx.mp4" type="video/mp4" />
        </video>
      </div>
      <div class="carousel-item">
        <video id="video_background" class="video-js vjs-16-9" poster="xxx.jpg" muted loop data-setup='{}'>
          <source src="xxx.mp4" type="video/mp4" />
        </video>
      </div>
    </div>
    <a class="carousel-control-prev" href="#main_carousel" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#main_carousel" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

Рабочий скрипт только для одного слайда (любые другие слайды не могут быть в карусели)

let player = document.querySelector('#video_background');
player.addEventListener("canplay", function (){
        setTimeout(function(){
            player.play();
          }, 3000);

    })

Затем я попробовал это для карусели BS4, однако это не сработало.

  $('#main_carousel').carousel({
    interval: 6000
  }).on('slide.bs.carousel',function(){
    var vids = $(this).find(".active video");
    setTimeout(function() {
             vids[0].play();
          }, 3000);
}); 

Я был бы рад любой помощи. Спасибо.