当有多部电影时，播放功能不起作用

Question

我在网站上创建了几个视频元素。一切正常，但是当有多部电影时，您只能通过单击“play-gif”来播放第一部。我哪里出错了？

html:

 <section class="video">
    <div class="container">
<h1>Video Player</h1>
<div class="video-wrapper">
    <div class="video-container" id="video-container">
        <video controls id="video" preload="metadata" poster="//cdn.jsdelivr.net/npm/big-buck-bunny-1080p@0.0.6/poster.jpg">
            <source src="//cdn.jsdelivr.net/npm/big-buck-bunny-1080p@0.0.6/video.mp4" type="video/mp4">
        </video>

        <div class="play-button-wrapper">
            <div title="Play video" class="play-gif" 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;
});

Answer 1

您的代码示例不包含任何 jquery，而是纯 js。
很确定您只选择了第一个实例。

您需要通过换行选择器查询所有视频实例：

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

然后您需要遍历所有实例并为其分配事件处理程序（和类）

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

例子

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 class="layout">
  <div class="video-wrapper">
    <video controls id="video" preload="metadata" poster="//cdn.jsdelivr.net/npm/big-buck-bunny-1080p@0.0.6/poster.jpg">
      <source src="//cdn.jsdelivr.net/npm/big-buck-bunny-1080p@0.0.6/video.mp4" type="video/mp4">
    </video>
    <svg class="playbutton" viewBox="0 0 80 80">
          <path d="M40 0a40 40 0 1040 40A40 40 0 0040 0zM26 61.56V18.44L64 40z" />
        </svg>
  </div>

  <div class="video-wrapper">
    <video controls id="video" preload="metadata" poster="//cdn.jsdelivr.net/npm/big-buck-bunny-1080p@0.0.6/poster.jpg">
      <source src="//cdn.jsdelivr.net/npm/big-buck-bunny-1080p@0.0.6/video.mp4" type="video/mp4">
    </video>
    <svg class="playbutton" viewBox="0 0 80 80">
          <path d="M40 0a40 40 0 1040 40A40 40 0 0040 0zM26 61.56V18.44L64 40z" />
        </svg>
  </div>
</div>

当有多部电影时，播放功能不起作用

The playback function does not work when there is more than one movie

html

css

video

jquery

例子