如何基於HTML5視頻元素的行為來控制引導輪播的行為？

Question

我正在嘗試實現Bootstrap輪播。 輪播將具有包含視頻或圖像的幻燈片。 我想這樣做，以使視頻幻燈片在視頻持續時間內保持活動狀態（設置為自動播放），然后繼續使用圖像的默認間隔。

我已經設置好輪播，使其包含四個圖像和一個視頻。 為了簡單起見，我在這里刪除了其中3張圖像的代碼。 在不添加任何其他Javascript的情況下，輪播會循環瀏覽圖像和視頻，並且視頻播放沒有問題。 由於為所有幻燈片設置了默認間隔，因此輪播會在視頻播放完成之前移至下一張幻燈片。

使用一些Javascript，我設法影響了時間間隔，但是我並不真正了解這種行為，或者我的Javascript甚至沒有道理。 老實說，自從我使用Java語言以來已經有一段時間了。

<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');
  };

更好的解決方案：我的印象是“數據間隔”標簽僅適用於輪播元素，但實際上適用於輪播元素。 我能夠僅設置單個項目的間隔，這使操作變得更加容易。

<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'));