javascript - 如何在 javascript 中为多个 html5 视频使用播放/暂停按钮？

Question

我目前在一个网站上工作，该网站有一系列 12 个 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 元素的上下文中运行，而它可能是视频 或 按钮 < em>与视频相关联。

您不知道显示您的 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();

}