怎么使用HTML5中Video标签的Ended事件实现播放完毕后自动跳转下一集-H5教程-PHP中文网

可通过监听video元素的ended事件实现播放结束跳转，支持同页切换视频源或页面跳转；需注意自动播放限制、动态加载时机及移动端兼容性。

怎么使用html5中video标签的ended事件实现播放完毕后自动跳转下一集

可以通过监听 video 元素的 ended 事件，在播放结束时触发跳转逻辑，比如加载下一集的视频地址或跳转到新页面。

监听 ended 事件并执行跳转

当视频自然播放完毕（非手动暂停或中断），ended 事件会被触发。你只需为元素绑定该事件即可：

使用 addEventListener('ended', handler) 是推荐方式，便于后续解绑或复用
确保视频元素已正确加载、且未被静音/阻塞（部分浏览器要求用户交互后才能自动播放）
跳转前可做简单判断，例如检查是否还有“下一集”可用，避免出错

跳转方式：更换视频源 or 页面跳转

根据实际需求选择合适方式：

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

在同一页面切换视频（推荐用于连续剧/课程）：修改 video.src 并调用 load() 和 play()
跳转到新页面（如下一集详情页）：使用 window.location.href = 'next-episode.html'
若需平滑过渡，可在跳转前加个提示或延时，例如 setTimeout(() => { ... }, 1000)

完整示例代码

以下是一个轻量、可直接运行的示例（假设已有下一集 URL）：

<video id="myVideo" controls><source src="ep1.mp4" type="video/mp4"></source></video><script>
const video = document.getElementById('myVideo');
const nextEpisodeUrl = 'ep2.mp4'; // 或 '/episode/2'

video.addEventListener('ended', () => {
  // 方式一：继续播下一集（同页面）
  video.src = nextEpisodeUrl;
  video.load();
  video.play().catch(e => console.warn('自动播放被阻止：', e));

  // 方式二：跳转页面（取消上面三行，启用下面这行）
  // window.location.href = '/episode/2';
});
</script>