HTML5 视频画廊海报动态管理教程

<ul class="home-page-video-gallery">
  <li class="media-gallery-page-type-video text-center">
    <div class="video-wrapper">
      <!-- 视频海报层，使用 class 而非重复 ID -->
      <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="视频海报1" />
      </div>
      <!-- 视频播放器，使用 class 而非重复 ID -->
      <video class="video" muted controls height="auto" width="931px">
        <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="视频海报2" />
      </div>
      <video class="video" muted controls height="auto" width="931px">
        <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="视频海报3" />
      </div>
      <video class="video" muted controls height="auto" width="931px">
        <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; /* 为绝对定位的 overlay 提供参照 */
}

.video-overlay {
  top: 0;
  left: 0;
  position: absolute;
  display: block; /* 默认显示 */
  z-index: 9999999; /* 确保在视频上方 */
}

.video-overlay img {
  width: 931px; /* 确保图片尺寸与视频匹配 */
  height: 526px;
  object-fit: cover; /* 保持图片比例并覆盖整个区域 */
}

// 获取所有视频海报元素和视频播放器元素
const overlays = document.querySelectorAll('.video-overlay');
const videos = document.querySelectorAll('.video');

// 用于跟踪每个视频播放状态的对象
// 键为视频的索引，值为布尔类型（true表示正在播放，false表示暂停）
const videoPlayingStatus = {};

/**
 * 隐藏海报并播放视频
 * @param {HTMLElement} overlay 当前视频的海报元素
 * @param {HTMLVideoElement} video 当前视频元素
 * @param {number} index 当前视频在列表中的索引
 */
function hideOverlayAndPlay(overlay, video, index) {
  overlay.style.display = 'none'; // 隐藏海报
  videoPlayingStatus[index] = true; // 更新播放状态为播放中
  video.play(); // 播放视频
}

/**
 * 显示海报并处理视频暂停事件
 * @param {HTMLElement} overlay 当前视频的海报元素
 * @param {HTMLVideoElement} video 当前视频元素
 * @param {number} index 当前视频在列表中的索引
 */
function showOverlayOnPause(overlay, video, index) {
  // 检查 video.readyState === 4 是为了区分用户暂停和视频缓冲/查找导致的暂停
  // 当 readyState 为 4 (HAVE_ENOUGH_DATA) 时，表示视频已准备好播放足够数据，
  // 此时的暂停通常是用户行为。
  if (video.readyState === 4) {
    overlay.style.display = 'block'; // 显示海报
    videoPlayingStatus[index] = false; // 更新播放状态为暂停
  }
}

// 遍历所有视频和海报，为它们绑定事件监听器
for (let i = 0; i < overlays.length; i++) {
  const currentOverlay = overlays[i];
  const currentVideo = videos[i];

  // 为海报元素添加点击事件监听器
  // 点击海报时，隐藏海报并播放对应的视频
  currentOverlay.addEventListener('click', function() {
    hideOverlayAndPlay(currentOverlay, currentVideo, i);
  });

  // 为视频元素添加暂停事件监听器
  // 视频暂停时，显示对应的海报
  currentVideo.addEventListener('pause', function() {
    showOverlayOnPause(currentOverlay, currentVideo, i);
  });

  // 初始化每个视频的播放状态为 false (暂停)
  videoPlayingStatus[i] = false;
}