视频播放结束后返回起始位置并显示海报的代码问题排查

嘿，先揪出你当前代码里的两个明显问题：

• 你给视频绑定的ended事件里，执行的是window.location跳转页面，这完全不是你想要的「回到起始位置+显示海报」的逻辑！
• 你之前尝试设置currentTime没生效，大概率是脚本执行时机不对——脚本写在video元素前面，浏览器加载到脚本时，video还没被渲染到DOM中，document.getElementById('video1')返回的是null，事件监听根本没绑定成功。

给你两个靠谱的解决方案：

方案1：把脚本挪到video元素之后 #

让浏览器先渲染视频元素，脚本执行时就能正确获取到视频对象，然后在结束事件里重置时间并触发海报显示：

<div class="full-video">
  <video controls width="100%" poster="images/training-program.jpg" id="video1">
    <source src="files/你的视频文件.mp4" type="video/mp4">
    <!-- 建议补充webm格式的source，提升浏览器兼容性 -->
  </video>
  <script type="text/javascript">
    const video = document.getElementById('video1');
    if (video) {
      video.addEventListener('ended', () => {
        // 重置到视频起始位置
        video.currentTime = 0;
        // 调用load方法，让浏览器重新加载视频资源，触发海报显示
        video.load();
        // 若不想重新加载，也可尝试 video.pause(); 部分浏览器支持此方式显示海报
      });
    }
  </script>
</div>

方案2：用DOM加载事件包裹代码 #

如果不想调整脚本位置，就用DOMContentLoaded事件确保整个DOM加载完成后再执行脚本：

<div class="full-video">
  <script type="text/javascript">
    document.addEventListener('DOMContentLoaded', () => {
      const video = document.getElementById('video1');
      if (video) {
        video.addEventListener('ended', () => {
          video.currentTime = 0;
          video.load();
        });
      }
    });
  </script>
  <video controls width="100%" poster="images/training-program.jpg" id="video1">
    <source src="files/你的视频文件.mp4" type="video/mp4">
  </video>
</div>

额外小贴士 #

• 你之前设置currentTime=1，其实应该设为0才是视频的真正起始位置哦～
• 部分浏览器在视频结束后，单纯设置currentTime不会自动切换回海报，所以需要调用load()或者pause()来触发海报显示。
• 一定要确认你的海报路径images/training-program.jpg是正确的，路径错误会导致海报无法显示。

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