我试图通过使用 JavaScript 获取每个元素的 id 来关闭模式后停止每个视频，但它只适用于最后一个视频。
这是两个带有模式的视频的 html:
<div id="popup1" class="overlay">
<div class="popup">
<h2>3B - Bum Bum Brasil</h2>
<a class="close" href="#">×</a>
<div class="content">
<center> <video width="90%" id="video" height="90%" controls>
<source src="videos/3b.mp4" type="video/mp4">
Your browser does not support the video tag.
</video></center>
</div>
</div></div>
<div id="popup2" class="overlay">
<div class="popup">
<h2>Six Pack</h2>
<a class="close" href="#">×</a>
<div class="content">
<center> <video width="90%" id="video2" height="90%" controls>
<source src="videos/sixpack.mp4" type="video/mp4">
Your browser does not support the video tag.
</video></center>
</div>
</div></div>
这是 JavaScript:
<script>
var video = document.getElementById("video");
function stopVid(){
video.pause();
video.currentTime = 0;
}
var video2 = document.getElementById("video2");
function stopVid(){
video2.pause();
video2.currentTime = 0;
}
$(".close").on('click', function(){
stopVid();
}
);
</script>
最佳答案
欢迎来到 Stack Overflow，恭喜你回答了第一个问题。
使用多个 id如果您有一个动态页面，其中要操作的元素数量不固定，那么值可能会很麻烦。所以除非<video>元素位于页面的完全不同部分，除了使用 getElementById 选择它之外没有其他方法。 ，那么我建议采取不同的方法。
两者都是.close和video元素都是 .popup 的子元素(或孙元素)元素。这是有用的信息!这使得事件委托(delegate)的使用非常有前景。
大多数事件都是泡沫。这意味着，例如，当一个 child 发射 click 时事件，那么该事件将向上穿过每个父级，直到到达 <html>标签。现在我们可以监听子级的点击并从父级处理它。喜欢听点击.close ，但从每个 .popup 处理它。不再需要id值。
选择所有 .popup元素。循环播放并聆听它们的 click事件与 addEventListener 。 不要将 jQuery 和 Vanilla JavaScript 交织在一起使用，在我看来:无论如何，最好学习 Vanilla，因为它会让你更好地理解 JavaScript 的工作原理。
在click的函数中您想知道 .close 是否发生事件按钮已被点击。如果有，则停止视频。如果没有，那就什么也不做。每个事件都会给您一个 Event目的。该对象为您提供有关事件类型、触发事件的元素、鼠标位置等信息。
event.target属性是触发事件的单击元素。我们可以检查它是否是.click使用 .closest() 按钮方法就可以了。如果它不是我们正在寻找的元素，它将返回 null 。否则我们就很稳固。
然后使用 querySelector 从当前弹出窗口中找到其中的视频。你有你的视频!现在您可以将其传递给您的 stopVid函数并暂停它。
下面的示例以代码形式向您展示了上述所有步骤。如果我不清楚或者您有任何疑问，请告诉我。
// Get all popup <div> elements.
const popups = document.querySelectorAll('.popup');
/**
* This stop function needs to know which
* <video> element you want to stop.
*/
function stopVideo(video) {
video.pause();
video.currentTime = 0;
}
/**
* When clicking inside the popup, check
* if the .close button is clicked. If it
* is then pause the video if it is present.
*/
function onPopupClick(event) {
const popup = this; // 'this' is element we are listening to.
const close = event.target.closest('.close');
if (close === null) {
return; // Stop the function.
}
const video = popup.querySelector('video');
if (video !== null) {
stopVideo(video);
}
}
// Loop over each popup.
for (const popup of popups) {
popup.addEventListener('click', onPopupClick);
}
祝你好运!
关于javascript - HTML5 中关闭模式后无法停止视频，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60696956/