我想让所有的视频都能播放/暂停JS

Question

我有一个页面，里面有一些视频。我想实现点击一个按钮播放视频的功能，如果我点击另一个按钮，当前视频将停止，下一个视频将开始播放。

这样的事情怎么可能实现呢？

我的项目类似于Netflix的主页。

我的网站：https://capcom2store.com/mov4k.php

这是我的JS:

<script>
var videoElement = document.getElementById("myVideo");
function playPause() {
if (videoElement.paused) {
videoElement.play();
} else {
videoElement.pause();
}
};
</script>

Answer 1

您可以做的事情之一是做类似于以下的事情：

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

尽管这是一个非常简单的例子，因为它接管了视频元素的所有点击事件。最好用另一种方式检测点击(比如有叠加元素或按钮(