如何为多个 HTML5 视频分别实现独立的灯箱（lightbox）播放功能

本文详解如何修复多个视频灯箱共用同一播放器的问题，通过精准绑定每个触发锚点与对应视频元素，确保点击不同封面时正确加载并播放各自关联的视频。

本文详解如何修复多个视频灯箱共用同一播放器的问题，通过精准绑定每个触发锚点与对应视频元素，确保点击不同封面时正确加载并播放各自关联的视频。

在实际开发中，当页面包含多个视频缩略图并希望各自以独立灯箱形式播放时，常见错误是使用全局变量统一管理视频元素，导致所有锚点始终操作同一个 <video> 实例。原代码中 currentVideo 存储的是 CSS 类名字符串（如 ‘.introVideo’），而 lightbox_open() 总是调用 document.querySelector(‘.light’) —— 这会始终匹配第一个 .light 容器，而非与当前点击锚点对应的视频容器，从而造成“两个链接打开同一视频”的现象。

根本问题在于：HTML 结构中存在多个 .light 和 .fade 元素，但 JavaScript 始终只操作第一个匹配项；同时，lightbox_open() 未建立锚点与目标视频容器之间的上下文关系。

✅ 正确解决方案：基于 DOM 上下文动态定位

应避免依赖全局选择器，转而利用事件触发源（即被点击的 <a> 元素）向上查找其逻辑关联的 .light 容器，并从中定位对应 <video>。推荐采用以下结构优化：

1. 调整 HTML 结构（语义化分组）

将每个视频模块（缩略图 + 灯箱容器）包裹在独立的逻辑区块中，例如使用 <section class=”video-module”>：

立即学习“前端免费学习笔记（深入）”；

<p class="video-content">
  <section class="video-module">
    <p class="video">
      <h2>Intro <span>Video</span></h2>
      <a href="#" class="openLightbox" data-video=".introVideo">
        <figure class="videoWrap">
          <img src="./images/pictures/video-temp.jpg" alt="Intro video thumbnail">
          <p class="overlay"></p>
          <p class="episode">
            Episode 0<br>
            Introductions<br>
            9/9/23<br>
            8m 32s
          </p>
        </figure>
      </a>
    </p>

    <p class="light">
      <a href="#" class="close-lightbox"></a>
      <video class="introVideo" controls width="600" preload="auto">
        <source src="./video/preview1.mp4" type="video/mp4">
        <source src="./video/preview1.webm" type="video/webm">
        <p>Your browser doesn't support this video. <a href="./video/preview1.mp4">Download it</a>.</p>
      </video>
    </p>
    <p class="fade"></p>
  </section>

  <section class="video-module">
    <p class="video">
      <h2>Latest <span>Video</span></h2>
      <a href="#" class="openLightbox" data-video=".latestVideo">
        <figure class="videoWrap">
          <img src="./images/pictures/video-temp.jpg" alt="Latest video thumbnail">
          <p class="overlay"></p>
          <p class="episode">
            Episode 1<br>
            Saved From What?<br>
            9/9/23<br>
            8m 32s
          </p>
        </figure>
      </a>
    </p>

    <p class="light">
      <a href="#" class="close-lightbox"></a>
      <video class="latestVideo" controls width="600" preload="auto">
        <source src="./video/preview2.mp4" type="video/mp4">
        <source src="./video/preview2.webm" type="video/webm">
        <p>Your browser doesn't support this video. <a href="./video/preview2.mp4">Download it</a>.</p>
      </video>
    </p>
    <p class="fade"></p>
  </section>
</p>

2. 重构 JavaScript（事件委托 + 上下文查找）

移除内联 onclick，改用事件委托，并通过 closest() 定位当前模块内的 .light 和 <video>：

// 统一键盘关闭（ESC）
document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') lightbox_close();
});

// 打开灯箱：根据点击的锚点，查找同模块下的 .light 和对应 video
document.addEventListener('click', (e) => {
  if (e.target.matches('.openLightbox')) {
    e.preventDefault();
    const module = e.target.closest('.video-module');
    const lightBox = module.querySelector('.light');
    const fade = module.querySelector('.fade');
    const videoSelector = e.target.dataset.video;
    const video = module.querySelector(videoSelector);

    if (video && lightBox && fade) {
      window.scrollTo(0, 0);
      lightBox.style.display = 'block';
      fade.style.display = 'block';
      video.currentTime = 0; // 重置播放进度
      video.play().catch(e => console.warn('Video autoplay prevented:', e));
    }
  }

  // 关闭按钮（含 .close-lightbox 和 .fade）
  if (e.target.matches('.close-lightbox, .fade')) {
    e.preventDefault();
    const module = e.target.closest('.video-module');
    const lightBox = module?.querySelector('.light');
    const fade = module?.querySelector('.fade');
    const video = module?.querySelector('video');

    if (video && lightBox && fade) {
      video.pause();
      lightBox.style.display = 'none';
      fade.style.display = 'none';
    }
  }
});

⚠️ 注意事项

• 移除 autoplay 属性：现代浏览器普遍禁止无用户交互的自动播放（尤其带声音的视频），建议删除 autoplay，改用 video.play() 在用户明确触发后调用（如上例所示）。
• .video-module 是关键封装单元：确保每个视频及其灯箱严格属于同一父级区块，否则 closest() 查找会失败。
• 错误处理：video.play() 可能因策略限制拒绝执行，需添加 .catch() 处理静音提示或 UI 回退方案。
• 无障碍优化：为 <a> 添加 aria-label（如 aria-label=”Play Intro video”），并确保 <video> 有 controls 和适当 alt 文本。

通过此方案，每个视频灯箱完全解耦、互不干扰，既符合语义化 HTML 原则，又具备良好的可维护性与扩展性。