如何在javascript中的多個html5視頻中使用播放/暫停按鈕？

Question

我目前在一個網站上工作，該網站包含一系列十二個HTML5視頻，這些視頻會在每個視頻的單獨的模式框中自動開始播放。 現在，我想為用戶提供播放和暫停視頻的控件（以及其他功能，但這與我當前的問題無關）。

到目前為止，我可以使用戶單擊視頻本身以播放和暫停它。 但是我添加的播放/暫停按鈕目前無法正常工作，下面的代碼將給我一個“ lastClicked.pause不是一個函數”錯誤。

我知道原因是因為當我單擊“播放/暫停”時，if語句中用作條件的lastClicked變量將包含一個按鈕，而按鈕沒有這些功能。 到目前為止，我已經知道了很多，但是我對下一步應該做什么感到有些困惑。

我應該在toggleVideo函數中引用特定視頻，然后將其替換為lastClicked變量，還是存在更簡單的解決方案？

編輯：添加了一些HTML供參考

Javascript：

// VIDEO CONTROLS
const portfolio = document.querySelector(".portfolio");
const player = portfolio.querySelectorAll(".viewer");
const toggle = portfolio.querySelectorAll(".toggle");

let lastClicked

function toggleVideo () {

    lastClicked = this;

    if(lastClicked.paused) {
        lastClicked.play();    
    }

    else {
        lastClicked.pause();
    }

  }

// Two different ways to play/pause the video - Clicking the video 
// itself and clicking the play/pause button

player.forEach(video => video.addEventListener ("click", toggleVideo ));
toggle.forEach(button => button.addEventListener ("click", toggleVideo ));

HTML：

<section class="portfolio" id="portfolio">


      <div class="video-wrapper">
          <div class="video-thumbnail"><img src="./media/img/thumbnails/1.hammerfall.jpg"></div>
          <button class="video-overlay" id="player" data-modal="videoOne"></button>
      </div
      ><div class="modal-box">
        <div class="modal-content">
          <span class="close-btn">&times;</span>
          <div class="player">
            <video class="player__video viewer" src="./media/video/1.waves.mp4"></video>

            <div class="video-controller">
              <div class="progress-bar">
                <div class="progress-filled"></div>
              </div>
                <button class="video-play toggle">►</button>
                <input type="range" name="volume" class="player-slider" min=0 max=1 step="0,05" value="1">
                <button class="video-volume mute">X</button>
            </div>
          </div>
        </div>
      </div

      ><div class="video-wrapper">
          <div class="video-thumbnail"><img src="./media/img/thumbnails/2.lordi.jpg"></div>
          <button class="video-overlay" data-modal="videoTwo"></button>
      </div
      ><div class="modal-box">
        <div class="modal-content">
          <span class="close-btn">&times;</span>
            <div class="player">
          <video class="player__video viewer" src="./media/video/2.words.mp4"></video>

            <div class="video-controller">
              <div class="progress-bar">
                <div class="progress-filled"></div>
              </div>
                <button class="video-play toggle">►</button>
                <input type="range" name="volume" class="player-slider" min=0 max=1 step="0,05" value="1">
                <button class="video-volume mute">X</button>
            </div>
          </div>
        </div>
      </div
      >
</section>

Answer 1

本質上，您需要將按鈕與視頻相關聯。

當前toggleVideo()假定它正在video元素的上下文中運行，而它可能是視頻或與視頻關聯的按鈕。

您不知道顯示HTML結構，但是對於此答案，我將使用以下視頻按鈕關系。

<div>
    <video />
    <button>Toggle</button>
</div>

...在我做作的示例中，按鈕是視頻的下一個兄弟。 video和button之間的精確關系並不重要，只是我們在toggleVideo()建立並迎合了它。

因此，現在變成：

function toggleVideo () {

    //establish video - might be @this, or might be prev sibling of @this
    let vid = this.tagName == 'VIDEO' ? this : this.previousSibling;

    lastClicked = vid;
    vid.paused ? vid.play() : vid.pause();

}