I want to make all videos can play/pause JS

Question

I need someone Help me on this.. First I have page has some videos the point is i want when i click on button to make my play and if i clack another i need it to play and the old one to be stop How Can I Do That?

MY PROJECT IS SIMILAR LIKE NETFLIX VIDEOS ON THE MAIN PAGE My WEBSITE: https://capcom2store.com/mov4k.php

This is my JS i need some modifying to make every videos work please help

  <script>
   var videoElement= document.getElementById("myVideo");

   function playPause() {
     if (videoElement.paused) {
        videoElement.play();
       }
       else {
          videoElement.pause();
        }
      };

      </script>

Answer 1

One of the things you can do is to do something similar to the following:

 // Get all video elements on the current page const videoElements = document.querySelectorAll("video"); for (const videoEl of videoElements) { // Listen to clicks on every one of the videos videoEl.onclick = () => { if (videoEl.paused) { for (const video of videoElements) { // When starting to play one video, pause all others video.pause(); } videoEl.play(); } else { videoEl.pause() } } }

 <video src="https://www.w3schools.com/html/mov_bbb.mp4"></video> <video src="https://www.w3schools.com/html/mov_bbb.mp4"></video>

Although this is a very simple example, because it takes over all of the click events of the video elements. It would be better to detect clicks another way (like having an overlay element or a button)