HTML5 视频画廊中动态管理封面图的实现

<ul class="home-page-video-gallery">
  <li class="media-gallery-page-type-video text-center">
    <div class="video-wrapper">
      <!-- 视频封面叠加层，通过类名进行选择 -->
      <div class="video-overlay">
        <img src="https://s3-ap-southeast-1.amazonaws.com/assets-powerstores-com/data/org/24526/theme/41159/img/home_page_v1.jpg" alt="Video Poster 1" />
      </div>
      <!-- HTML5 视频元素，通过类名进行选择 -->
      <video class="video" muted controls height="auto" width="931px" height="526px">
        <source src="https://s3-ap-southeast-1.amazonaws.com/assets-powerstores-com/data/org/24526/theme/41159/img/video_4.mp4" type="video/mp4" />
        您的浏览器不支持HTML5视频标签。
      </video>
    </div>
  </li>
  <li class="media-gallery-page-type-video text-center">
    <div class="video-wrapper">
      <div class="video-overlay">
        <img src="https://s3-ap-southeast-1.amazonaws.com/assets-powerstores-com/data/org/24526/theme/41159/img/v24.jpg" alt="Video Poster 2" />
      </div>
      <video class="video" muted controls height="auto" width="931px" height="526px">
        <source src="https://s3-ap-southeast-1.amazonaws.com/assets-powerstores-com/data/org/24526/theme/41159/img/video_21.mp4" type="video/mp4" />
        您的浏览器不支持HTML5视频标签。
      </video>
    </div>
  </li>
  <li class="media-gallery-page-type-video text-center">
    <div class="video-wrapper">
      <div class="video-overlay">
        <img src="https://s3-ap-southeast-1.amazonaws.com/assets-powerstores-com/data/org/24526/theme/41159/img/v25.jpg" alt="Video Poster 3" />
      </div>
      <video class="video" muted controls height="auto" width="931px" height="526px">
        <source src="https://s3-ap-southeast-1.amazonaws.com/assets-powerstores-com/data/org/24526/theme/41159/img/video_22.mp4" type="video/mp4" />
        您的浏览器不支持HTML5视频标签。
      </video>
    </div>
  </li>
</ul>

.video-wrapper {
  position: relative; /* 使子元素可以相对于此容器定位 */
  display: inline-block; /* 保持块级元素的宽度适应内容，并允许相邻元素排列 */
}

.video-overlay {
  top: 0;
  left: 0;
  position: absolute; /* 绝对定位，覆盖在视频上方 */
  display: block; /* 默认显示 */
  z-index: 9999999; /* 确保封面图在视频上方 */
  cursor: pointer; /* 提示用户可以点击 */
}

.video-overlay img {
  width: 931px; /* 确保图片与视频宽度一致 */
  height: 526px; /* 确保图片与视频高度一致 */
  display: block; /* 移除图片底部可能出现的额外空间 */
}

.video {
  display: block; /* 确保视频元素占据完整空间 */
}

document.addEventListener('DOMContentLoaded', function() {
  // 使用querySelectorAll获取所有具有指定类名的元素集合
  var overlays = document.querySelectorAll('.video-overlay');
  var videos = document.querySelectorAll('.video');
  // 使用一个对象来维护每个视频的播放状态，以便独立控制
  var videoPlayingStates = {}; 

  /**
   * 隐藏封面图并播放视频
   * @param {HTMLElement} overlay - 当前视频的封面图元素
   * @param {HTMLVideoElement} video - 当前视频元素
   * @param {number} index - 当前视频在集合中的索引
   */
  function hideOverlayAndPlay(overlay, video, index) {
    overlay.style.display = "none"; // 隐藏封面图
    videoPlayingStates[index] = true; // 更新播放状态为正在播放
    video.play(); // 播放视频
  }

  /**
   * 显示封面图（当视频暂停时）
   * @param {HTMLElement} overlay - 当前视频的封面图元素
   * @param {HTMLVideoElement} video - 当前视频元素
   * @param {number} index - 当前视频在集合中的索引
   */
  function showOverlayOnPause(overlay, video, index) {
    // 检查视频是否已完全加载，以区分真正的暂停和视频缓冲/seek操作
    if (video.readyState === 4) { // readyState 4 表示视频已加载完毕并可播放
      overlay.style.display = "block"; // 显示封面图
      videoPlayingStates[index] = false; // 更新播放状态为未播放
    }
  }

  // 遍历所有视频和封面图对，为每个对添加事件监听器
  for (let i = 0; i < overlays.length; i++) {
    // 初始化每个视频的播放状态
    videoPlayingStates[i] = false; 

    // 为每个视频添加 'pause' 事件监听器
    videos[i].addEventListener('pause', function() {
      showOverlayOnPause(overlays[i], videos[i], i);
    });

    // 为每个封面图添加 'click' 事件监听器
    overlays[i].addEventListener('click', function() {
      hideOverlayAndPlay(overlays[i], videos[i], i);
    });
  }
});