干杯伙计们，我会从一开始就提到我是这个世界的新手，我希望你能就以下问题提供一些帮助：
我有一个按钮。单击时，按钮会打开一个弹出窗口并自动播放位于弹出窗口中的视频。我想要做的是以下内容：
当用户单击按钮时，弹出窗口将触发并且视频将自动播放。当用户单击关闭“X”按钮时，弹出窗口应该关闭并且视频应该停止/暂停。
我有以下代码：
HTML
<div class="video-button-container">
<img src="media/video-bg.png">
<a href="#" onclick="toggle();">
<img src="media/play.png" class="play">
</a>
</div>
<div class="video-container">
<img src="media/close.png" class="close" onclick="close();">
<video src="media/video.mp4" controls="true" class="video"></video>
</div>
CSS
.video-button-container {
position: absolute;
top: 70px;
right: 70px;
}
.play {
position: absolute;
top: 25%;
right: 35%;
}
.video-container {
position: absolute;
right: 0;
top: 0;
z-index: 10000;
background: rgba(0, 0, 0, 0.25);
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
visibility: hidden;
opacity: 0;
}
.video-container.active {
visibility: visible;
opacity: 1;
}
.video-container video {
position: relative;
max-width: 900px;
outline: none;
}
.close {
position: absolute;
top: 80px;
right: 20px;
cursor: pointer;
max-width: 32px;
}
@media (max-width: 991px) {
.video-container video {
max-width: 90%;
}
}
JS
var videoElem = document.querySelector(".video-container video");
var trailerElem = document.querySelector(".video-container")
function toggle() {
trailerElem.classList.add("active");
videoElem.play();
videoElem.currentTime = 0;
}
function close() {
trailerElem.classList.remove("active");
videoElem.pause();
videoElem.currentTime = 0;
}
有人可以告诉我，我做错了什么吗？祝你今天过得愉快！
该close.png元素没有绑定任何事件，因为它不在visible加载页面时，因此您必须在加载后绑定事件。
/* function close() {
trailerElem.classList.remove("active");
videoElem.pause();
videoElem.currentTime = 0;
}
*/
window.onload = function () {
document.getElementsByClassName("close")[0]
.addEventListener("click", function (e) {
trailerElem.classList.remove("active");
videoElem.pause();
videoElem.currentTime = 0;
});
};
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句