如何根据 HTML5 视频元素的行为控制引导轮播的行为？

Question

我正在尝试实现 Bootstrap 轮播。轮播将包含包含视频或图像的幻灯片。我想让视频幻灯片在视频播放期间保持活动状态（设置为自动播放），然后继续使用图像的默认间隔。

我已经设置了轮播，使其包含四个图像和一个视频。为简单起见，我在此处删除了 3 个图像的代码。无需添加任何额外的 Javascript，轮播将在图像和视频之间循环播放，并且视频播放没有问题。因为为所有幻灯片设置了默认间隔，所以在视频完成之前轮播会移动到下一张幻灯片。

使用一些 Javascript，我设法影响了间隔，但我并不真正理解这种行为，或者我的 Javascript 是否有意义。老实说，我已经有一段时间没有使用 Javascript 了。

<div id="VIS-BBNALobby-C" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item">
      <img class="d-block w-100" src="/media/VIS-BBNALobby-M/aaa.jpg">
    </div>
    <div class="carousel-item vidslide active">
      <video class="d-block w-100" autoplay="" muted="">
        <source src="/media/VIS-BBNALobby-M/vid.mp4" type="video/mp4">
      </video>
    </div>
  </div>
</div>

<script>
  $('#VIS-BBNALobby-C').on('slide.bs.carousel', function () {
        var slide = $('#VIS-BBNALobby-C').find('.active')
        if(slide.hasClass('vidslide')){
            $('#VIS-BBNALobby-C').carousel('pause');
        }
        while(!(slide.attr('ended'))){
            //waiting for video playback to end
        }
        $('#VIS-BBNALobby-C').carousel('cycle');
  });
</script>

我希望轮播暂停循环，直到视频返回播放已结束，在这种情况下，循环继续。我相信发生的事情是视频播放，轮播直到第一次切换到下一张幻灯片才会暂停，然后循环播放。我很难说出发生了什么。我不太习惯使用浏览器进行调试。

解决方案：我接受了 6502 提出的事件建议，尽管我写的有点不同，如W3Schools 上所见。

  var vid = document.getElementById("wedidit");

  vid.onplay = function() {
    $('#VIS-BBNALobby-C').carousel('pause');
  };

  vid.onended = function () {
  $('#VIS-BBNALobby-C').carousel('next');
  $('#VIS-BBNALobby-C').carousel('cycle');
  };

更好的解决方案：我的印象是“data-interval”标签只适用于 carousel 元素，但它实际上适用于 carousel-item 元素。我能够为单个项目设置间隔，使这更容易。

  var vid = document.getElementById("wedidit");

  vid.onplay = function() {
    $('#VIS-BBNALobby-C').carousel('pause');
  };

  vid.onended = function () {
  $('#VIS-BBNALobby-C').carousel('next');
  $('#VIS-BBNALobby-C').carousel('cycle');
  };