如何实现YouTube风格HTML5视频结束屏 展示可点击的相关推荐视频链接

核心实现思路 #

• 将<video>标签和结束屏容器放在同一个相对定位的父级元素内，结束屏默认设置为绝对定位+隐藏状态，层级高于视频，铺满整个视频区域
• 监听video的ended事件，触发时直接显示结束屏即可，无需强制跳转，所有跳转逻辑完全交给用户点击交互触发
• 结束屏内部可以自由排版下一集卡片、相关视频推荐、重播按钮等内容，灵活性远高于静态结束图方案

代码实现示例 #

1. HTML结构 #

<!-- 视频外层容器 -->
<div class="video-wrapper" style="position: relative; width: 100%; max-width: 900px; aspect-ratio: 16/9;">
  <video id="course-video" controls style="width: 100%; height: 100%;">
    <source src="当前视频地址.mp4" type="video/mp4">
  </video>
  <!-- 视频结束屏，默认隐藏 -->
  <div id="end-screen" style="display: none; position: absolute; inset: 0; background: rgba(0,0,0,0.9); z-index: 10; padding: 24px; color: #fff;">
    <h3>当前视频已播放完成</h3>
    <div class="recommend-area" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-top: 20px;">
      <!-- 下一集卡片 -->
      <a href="下一集地址" style="text-decoration: none; color: #fff;">
        <img src="下一集封面图地址" alt="下一集标题" style="width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 6px;">
        <p style="margin: 8px 0 0 0; font-size: 14px;">下一集：xxx章节讲解</p>
      </a>
      <!-- 其他相关视频卡片，可按需动态渲染 -->
      <a href="相关视频1地址" style="text-decoration: none; color: #fff;">
        <img src="相关视频1封面图地址" alt="相关视频1标题" style="width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 6px;">
        <p style="margin: 8px 0 0 0; font-size: 14px;">推荐：xxx知识点拓展</p>
      </a>
    </div>
    <button id="replay-btn" style="margin-top: 24px; padding: 8px 16px; cursor: pointer;">重新播放</button>
  </div>
</div>

2. JavaScript逻辑 #

const video = document.getElementById('course-video');
const endScreen = document.getElementById('end-screen');
const replayBtn = document.getElementById('replay-btn');

// 监听视频播放结束事件，显示结束屏
video.addEventListener('ended', () => {
  endScreen.style.display = 'block';
});

// 重新播放逻辑
replayBtn.addEventListener('click', () => {
  endScreen.style.display = 'none';
  video.currentTime = 0;
  video.play();
});

// 可选：用户主动点击播放时自动隐藏结束屏
video.addEventListener('play', () => {
  endScreen.style.display = 'none';
});

可扩展优化点 #

• 结合当前播放视频的ID，动态请求接口获取对应的下一集、相关视频数据，渲染到结束屏中，无需写死静态内容
• 可在结束屏添加可选的倒计时自动跳转功能，同时保留取消按钮，兼顾自主选择和懒人需求
• 适配移动端时调整推荐卡片的列数，保证点击区域符合移动端交互规范
• 可在视频播放到最后3-5秒时预加载结束屏的封面图，避免显示时出现空白加载状态

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