How can I use the same custom html5 video controls for multiple videos on the same page?

Question

I have 3, html5 videos on a page. I would like to use the same custom playback controls for each video that is just a play/pause button, under each video. The javascript code I used is:

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

The HTML for each of the videos (source will change once I figure this out) is:

<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>

The custom play/pause button only works on the first video.

I thought because it is just looking at the selector, it would work for all videos using that selector. I'm guessing I need a loop for this, but I have no clue how to implement it/don't understand the syntax.

Any advice would be greatly appreciated.

Answer 1

Something like this should work for you. It finds all the .video-player wrapping elements, and then in a loop it will find the child .video and .toggleButton elements and attach events to each of those

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>