我目前的任务是在一个网站上放 5 个视频，它们往往会非常强烈地减慢页面加载速度。因此，为了提高网站的性能，我想到了加载缩略图并仅在用户点击缩略图（或播放按钮）后加载视频 我写了以下代码： `
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
document.addEventListener("DOMContentLoaded", function() {
const videoContainer = document.querySelector(".video-container");
const videoPlayer = document.getElementById("video");
const thumbnail = document.querySelector(".thumbnail");
const playButton = document.querySelector(".play-button");
videoContainer.addEventListener("click", () => {
thumbnail.style.display = "none";
playButton.style.display = "none";
videoPlayer.style.display = "block";
videoPlayer.play();
});
});
</script>
<style>
body {
margin: 0;
display: flex;
}
.video-grid {
display: flex;
flex-wrap: wrap;
gap: 16px;
padding: 16px;
box-sizing: border-box;
width: 70%;
align-self: center;
}
.video-container {
position: relative;
flex-basis: calc(33.333% - 16px); /* For 3 columns */
cursor: pointer;
}
.thumbnail {
width: 100%;
height: auto;
}
.video-player {
display: none;
position: absolute;
top: 0;
left: 0;
}
.play-button {
font-size: 60px;
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0.8;
transition: opacity 0.2s;
}
.play-button:hover {
opacity: 1;
}
/* Responsive rules */
@media (max-width: 992px) {
.video-container {
flex-basis: calc(50% - 16px); /* For 2 columns */
}
}
@media (max-width: 600px) {
.video-container {
flex-basis: 100%; /* For 1 column */
}
}
</style>
</head>
<body>
<div class="video-grid">
<!-- Video-container for each of the videos -->
<div class="video-container">
<img class="thumbnail" src="https://i.natgeofe.com/n/548467d8-c5f1-4551-9f58-6817a8d2c45e/NationalGeographic_2572187_square.jpg" alt="video thumbnail">
<div class="play-button">►</div>
<video id="video" class="video-player" width="100%" height="100%" preload="none">
<source src="1.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<!-- End of video-container -->
<div class="video-container">
<img class="thumbnail" src="https://i.natgeofe.com/n/548467d8-c5f1-4551-9f58-6817a8d2c45e/NationalGeographic_2572187_square.jpg" alt="video thumbnail">
<div class="play-button">►</div>
<video id="video" class="video-player" width="100%" height="100%" preload="none">
<source src="2.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="video-container">
<img class="thumbnail" src="https://i.natgeofe.com/n/548467d8-c5f1-4551-9f58-6817a8d2c45e/NationalGeographic_2572187_square.jpg" alt="video thumbnail">
<div class="play-button">►</div>
<video id="video" class="video-player" width="100%" height="100%" preload="none">
<source src="3.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="video-container">
<img class="thumbnail" src="https://i.natgeofe.com/n/548467d8-c5f1-4551-9f58-6817a8d2c45e/NationalGeographic_2572187_square.jpg" alt="video thumbnail">
<div class="play-button">►</div>
<video id="video" class="video-player" width="100%" height="100%" preload="none">
<source src="4.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="video-container">
<img class="thumbnail" src="https://i.natgeofe.com/n/548467d8-c5f1-4551-9f58-6817a8d2c45e/NationalGeographic_2572187_square.jpg" alt="video thumbnail">
<div class="play-button">►</div>
<video id="video" class="video-player" width="100%" height="100%" preload="none">
<source src="5.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
</body>
</html>`
现在网格中的第一个视频开始工作了。但出于某种原因，没有其他视频有效。谁能帮我找出我犯的错误，或者提出更好的解决方案？谢谢！