多视频缩略图点击播放异常：仅首个视频可用的问题排查求助

核心问题 #

1. 重复ID冲突：所有<video>标签都使用了相同的id="video"，而document.getElementById()只会返回页面中第一个匹配该ID的元素，导致只有第一个视频能被选中并触发播放。
2. 事件绑定范围有限：document.querySelector(".video-container")仅获取第一个视频容器，事件只绑定在第一个容器上，其余容器点击无响应。

修复后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // 获取所有视频容器
            const videoContainers = document.querySelectorAll(".video-container");
            
            // 为每个容器绑定点击事件
            videoContainers.forEach(container => {
                // 查找当前容器内的元素
                const thumbnail = container.querySelector(".thumbnail");
                const playButton = container.querySelector(".play-button");
                const videoPlayer = container.querySelector(".video-player");

                container.addEventListener("click", () => {
                    thumbnail.style.display = "none";
                    playButton.style.display = "none";
                    videoPlayer.style.display = "block";
                    videoPlayer.play().catch(err => {
                        // 处理播放失败的情况，比如浏览器自动播放限制
                        console.error("视频播放失败:", err);
                        // 恢复缩略图，提示用户手动点击播放
                        thumbnail.style.display = "block";
                        playButton.style.display = "block";
                    });
                });
            });
        });
    </script>
    <style>
        body {
            margin: 0;
            display: flex;
            justify-content: center;
        }
        .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);
            cursor: pointer;
            aspect-ratio: 16/9; /* 保持视频容器比例一致 */
            overflow: hidden;
        }

        .thumbnail {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .video-player {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .play-button {
            font-size: 60px;
            color: white;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            opacity: 0.8;
            transition: opacity 0.2s;
            text-shadow: 0 0 10px rgba(0,0,0,0.8);
        }

        .play-button:hover {
            opacity: 1;
        }

        /* Responsive rules */
        @media (max-width: 992px) {
            .video-container {
                flex-basis: calc(50% - 16px);
            }
        }

        @media (max-width: 600px) {
            .video-container {
                flex-basis: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="video-grid">
        <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">&#9658;</div>
            <video class="video-player" preload="none">
                <source src="1.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">&#9658;</div>
            <video class="video-player" 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">&#9658;</div>
            <video class="video-player" 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">&#9658;</div>
            <video class="video-player" 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">&#9658;</div>
            <video class="video-player" preload="none">
                <source src="5.mp4" type="video/mp4">
                Your browser does not support the video tag.
            </video>
        </div>
    </div>
</body>
</html>

关键修改说明 #

1. 移除重复ID：删除所有<video>的id="video"属性，改用类选择器.video-player区分。
2. 批量绑定事件：用querySelectorAll获取所有视频容器，通过forEach循环为每个容器绑定点击事件。
3. 元素相对查找：在事件处理函数中，通过当前容器container.querySelector()查找内部的缩略图、播放按钮和视频元素，确保每个容器独立处理自身内容。
4. 添加播放错误处理：调用videoPlayer.play()时添加catch，处理浏览器自动播放限制导致的失败问题，提升用户体验。
5. 优化容器比例：添加aspect-ratio: 16/9确保视频容器比例统一，避免缩略图和视频变形。

额外优化建议 #

• 事件委托替代批量绑定：如果视频数量较多，可将事件绑定到.video-grid上，通过事件冒泡判断点击目标，减少事件绑定数量：

  document.querySelector(".video-grid").addEventListener("click", function(e) {
      const container = e.target.closest(".video-container");
      if (!container) return;
      // 后续逻辑和之前一致，使用container查找内部元素
  });
  

• 暂停后恢复缩略图：添加视频暂停事件，当视频暂停时重新显示缩略图和播放按钮，方便用户再次播放。
• 懒加载缩略图：为缩略图添加loading="lazy"属性，进一步优化页面初始加载速度。

内容的提问来源于stack exchange，提问作者Ivan