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

Question

我在网站上创建了几个视频元素。一切都很好，但当有多部电影时，你只能点击"播放第一部；播放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>