I create several video elements on the website. Everything works fine, but when there is more than one movie, you can only play the first one by clicking "play-gif". Where am I making a mistake?

html:

 <section >
    <div >
<h1>Video Player</h1>
<div >
    <div  id="video-container">
        <video controls id="video" preload="metadata" poster="//cdn.jsdelivr.net/npm/[email protected]/poster.jpg">
            <source src="//cdn.jsdelivr.net/npm/[email protected]/video.mp4" type="video/mp4">
        </video>

        <div >
            <div title="Play video"  id="circle-play-b">
                <!-- SVG Play Button -->
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80">
                    <path d="M40 0a40 40 0 1040 40A40 40 0 0040 0zM26 61.56V18.44L64 40z" />
                </svg>
            </div>
        </div>
    </div>
</div>
</div> <!-- End Container -->
</section>

jquery

circlePlayButton.addEventListener("click", this.togglePlay);
video.addEventListener("playing", function () {
    circlePlayButton.style.opacity = 0;
  
});
video.addEventListener("pause", function () {
    circlePlayButton.style.opacity = 1;
});

CodePudding user response：

Your code example does't contain any jquery but plain js.
Pretty sure you've been selecting only the first instance.

You need to query all video instances via wrap selector:

let videoWraps = document.querySelectorAll(".video-wrapper");

Then you need to loop through all instances and assign event handlers (and classes) to it

videoWraps.forEach(function (videoWrap, i) {
  let video = videoWrap.querySelector("video");
  let playBtn = videoWrap.querySelector(".playbutton");
  playBtn.addEventListener("click", function (e) {
    let btn = e.currentTarget;
    if (video.paused == true) {
      video.play();
    } else {
      video.pause();
    }
  });

  video.addEventListener("playing", function (e) {
    videoWrap.classList.toggle("video-playing");
  });
  video.addEventListener("pause", function (e) {
    videoWrap.classList.toggle("video-playing");
  });
});

Example

let videoWraps = document.querySelectorAll(".video-wrapper");
if (videoWraps.length) {
  videoWraps.forEach(function(videoWrap, i) {
    let video = videoWrap.querySelector("video");
    let playBtn = videoWrap.querySelector(".playbutton");
    playBtn.addEventListener("click", function(e) {
      let btn = e.currentTarget;
      if (video.paused == true) {
        video.play();
      } else {
        video.pause();
      }
    });

    video.addEventListener("playing", function(e) {
      videoWrap.classList.toggle("video-playing");
    });
    video.addEventListener("pause", function(e) {
      videoWrap.classList.toggle("video-playing");
    });
  });
}

.layout {
  display: flex;
  width: 66%;
  gap: 1em;
  margin: 0 auto;
}

.video-wrapper {
  margin: 0 auto;
  position: relative;
}

video {
  max-width: 100%;
}

.playbutton {
  display: inline-block;
  height: 20%;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translateX(-50%);
}

.playbutton {
  transition: 0.3s;
  fill: red;
}

.video-playing .playbutton {
  opacity: 0;
}

<div >
  <div >
    <video controls id="video" preload="metadata" poster="//cdn.jsdelivr.net/npm/[email protected]/poster.jpg">
      <source src="//cdn.jsdelivr.net/npm/[email protected]/video.mp4" type="video/mp4">
    </video>
    <svg  viewBox="0 0 80 80">
          <path d="M40 0a40 40 0 1040 40A40 40 0 0040 0zM26 61.56V18.44L64 40z" />
        </svg>
  </div>

  <div >
    <video controls id="video" preload="metadata" poster="//cdn.jsdelivr.net/npm/[email protected]/poster.jpg">
      <source src="//cdn.jsdelivr.net/npm/[email protected]/video.mp4" type="video/mp4">
    </video>
    <svg  viewBox="0 0 80 80">
          <path d="M40 0a40 40 0 1040 40A40 40 0 0040 0zM26 61.56V18.44L64 40z" />
        </svg>
  </div>
</div>