多视频场景下元素定位、播放按钮隐藏及ended事件监听实现

我来帮你搞定多视频场景下的元素定位、播放按钮隐藏和ended事件监听问题，完全贴合你的需求，一步步来：

先明确HTML结构（补全你提供的片段） #

假设你的页面视频结构是这样的，每个视频对应一个容器和重播按钮：

<div class="video-container">
  <video class="vidDJ" width="640" height="360" poster="video-poster.jpg">
    <source src="video1.mp4" type="video/mp4">
  </video>
  <button class="replay-btn" style="display:none;">重播</button>
</div>
<div class="video-container">
  <video class="vidDJ" width="640" height="360" poster="video-poster2.jpg">
    <source src="video2.mp4" type="video/mp4">
  </video>
  <button class="replay-btn" style="display:none;">重播</button>
</div>

1. 精准定位目标视频元素 #

有几种灵活的定位方式：

• 批量获取所有目标视频：用document.querySelectorAll('.vidDJ')拿到页面上所有带.vidDJ类的视频，后续遍历处理每个视频。
• 定位当前播放的视频：在事件触发时（比如ended或play事件），用event.target直接获取当前操作的视频元素，这是最精准的方式，不会搞混其他视频。
• 通过父容器关联元素：每个视频都在.video-container里，可通过currentVideo.parentElement找到对应容器，进而操作里面的重播按钮。

2. 隐藏播放按钮/默认控件 #

方式一：用CSS全局隐藏 #

直接隐藏默认控件，同时自定义重播按钮（推荐这种方式，更高效）：

/* 隐藏视频默认控件 */
.vidDJ {
  controls: none;
  pointer-events: none; /* 可选，防止用户误点默认控件区域 */
}

/* 如果只想隐藏播放按钮、保留其他控件，可针对不同浏览器做兼容 */
.vidDJ::-webkit-media-controls-play-button {
  display: none !important;
}
.vidDJ::-moz-media-controls-play-button {
  display: none !important;
}
.vidDJ::-ms-media-controls-play-button {
  display: none !important;
}

方式二：JS动态控制 #

如果需要按需切换显示/隐藏控件，用JS操作：

// 隐藏单个视频的控件
function hideVideoControls(video) {
  video.controls = false;
}

// 批量处理所有视频
document.querySelectorAll('.vidDJ').forEach(video => {
  hideVideoControls(video);
});

3. 绑定ended事件监听器（核心需求） #

重点是让每个视频的ended事件只针对自己执行逻辑，用event.target精准定位当前视频，然后完成重载、显示重播按钮等操作：

// 页面加载完成后执行所有逻辑
document.addEventListener('DOMContentLoaded', function() {
  // 获取所有视频元素
  const allVideos = document.querySelectorAll('.vidDJ');

  // 遍历每个视频，绑定事件
  allVideos.forEach(video => {
    // 初始化：隐藏默认控件
    video.controls = false;

    // 绑定播放结束事件
    video.addEventListener('ended', function(event) {
      const currentVideo = event.target;
      // 找到当前视频对应的重播按钮
      const replayBtn = currentVideo.parentElement.querySelector('.replay-btn');

      // 1. 重载视频，回到初始状态支持再次播放
      currentVideo.load();

      // 2. 显示重播按钮
      replayBtn.style.display = 'block';

      // 3. 给重播按钮绑定点击事件（用once确保只绑定一次，避免重复触发）
      replayBtn.addEventListener('click', function() {
        currentVideo.play();
        replayBtn.style.display = 'none';
      }, { once: true });
    });

    // 可选：点击视频区域直接播放/暂停
    video.addEventListener('click', function() {
      this.paused ? this.play() : this.pause();
    });
  });
});

关键细节说明 #

• event.target的作用：在ended事件里，它就是当前播放结束的视频元素，完美解决“针对特定视频操作”的需求，不会影响其他视频。
• { once: true }的意义：给重播按钮绑定点击事件时加这个选项，确保每次播放结束后只绑定一次点击事件，避免多次点击导致的重复触发问题。
• video.load()的作用：重新加载视频源，让视频回到初始状态，这样再次播放时能从头开始。

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