javascript - 如何根据 HTML5 视频元素的行为控制 Bootstrap 轮播的行为？

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 元素有效。我能够为单个项目设置间隔，从而使这变得容易得多。

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

Answer 1

你不能在 Javascript 中这样“等待”，你需要使用事件。

您需要将视频结束事件附加到处理程序，该处理程序将使用类似...的方式恢复轮播的循环

addEventListener(video, "ended", ()=>('#VIS-BBNALobby-C').carousel('cycle'));