如何对同一页面上的多个视频使用相同的自定义 html5 视频控件？

Question

我的页面上有 3 个 html5 视频。我想对每个视频使用相同的自定义播放控件，这只是每个视频下方的播放/暂停按钮。我使用的javascript代码是：

video = document.querySelector(".video");
toggleButton = document.querySelector(".toggleButton");
function togglePlay() {
  if (video.paused || video.ended) {
    video.play();
  } else {
    video.pause();
  }
}
function updateToggleButton() {
  toggleButton.innerHTML = video.paused ? "►" : "❚❚";
}
toggleButton.addEventListener("click", togglePlay);
video.addEventListener("click", togglePlay);
video.addEventListener("play", updateToggleButton);
video.addEventListener("pause", updateToggleButton);

每个视频的 HTML（一旦我弄清楚这一点，来源就会改变）是：

<div class="video-player">
      <video class="video" controls poster="/test-video/test-video-poster.jpg">
        <source
          src="/test-video/test-video.mp4"
          type="video/mp4"
        />
        <source
          src="/test-video/test-video.mp4"
          type="video/webm"
        />
        <p>Your browser doesn't support HTML5 video.</p>
      </video>
       <div class="controls">
         <button class="controls__button toggleButton" title="Toggle Play">►</button>
       </div>
</div>

自定义播放/暂停按钮仅适用于第一个视频。

我想因为它只是查看选择器，所以它适用于使用该选择器的所有视频。我猜我需要一个循环，但我不知道如何实现它/不理解语法。

如有任何建议，我们将不胜感激。

Answer 1

这样的东西应该适合你。它找到所有

.video-player

包装元素，然后在循环中找到子

.video

和

.toggleButton

元素，并将事件附加到每个元素上

const players = document.querySelectorAll(".video-player");

[...players].forEach((player)=>{
  const videoEl = player.querySelector(".video");
  const toggleBtnEl = player.querySelector(".toggleButton");
    
  toggleBtnEl.addEventListener("click", ()=> togglePlay(videoEl));
  videoEl.addEventListener("click", ()=> togglePlay(videoEl));
  videoEl.addEventListener("play", ()=> updateToggleButton(toggleBtnEl, videoEl));
  videoEl.addEventListener("pause", ()=> updateToggleButton(toggleBtnEl, videoEl));
});

function togglePlay(videoEl) {
  if (videoEl.paused || videoEl.ended) {
    videoEl.play();
  } else {
    videoEl.pause();
  }
}

function updateToggleButton(toggleBtnEl, videoEl) {
  toggleBtnEl.innerHTML = videoEl.paused ? "►" : "❚❚";
}

<div class="video-player">
  <video class="video" controls poster="/test-video/test-video-poster1.jpg">
    <source
      src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"
      type="video/mp4"
    />
    <source
      src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"
      type="video/webm"
    />
    <p>Your browser doesn't support HTML5 video.</p>
  </video>
   <div class="controls">
     <button class="controls__button toggleButton" title="Toggle Play">►</button>
   </div>
</div>

<div class="video-player">
  <video class="video" controls poster="/test-video/test-video-poster2.jpg">
    <source
      src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"
      type="video/mp4"
    />
    <source
      src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"
      type="video/webm"
    />
    <p>Your browser doesn't support HTML5 video.</p>
  </video>
   <div class="controls">
     <button class="controls__button toggleButton" title="Toggle Play">►</button>
   </div>
</div>

<div class="video-player">
  <video class="video" controls poster="/test-video/test-video-poster3.jpg">
    <source
      src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"
      type="video/mp4"
    />
    <source
      src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"
      type="video/webm"
    />
    <p>Your browser doesn't support HTML5 video.</p>
  </video>
   <div class="controls">
     <button class="controls__button toggleButton" title="Toggle Play">►</button>
   </div>
</div>