HTML5 <video> 标签可通过 JavaScript 原生 API 实现片头自动跳过与片尾自动连播：用 timeupdate 事件配合标记位跳过片头，用 ended 事件触发 src 切换、load() 和 play() 实现连播，并需处理自动播放策略、预加载及用户交互限制。
HTML5 的 <video> 标签本身不直接支持“片头自动跳过”或“片尾自动连播”，但通过 JavaScript 结合其原生 API（如 currentTime、ended 事件、load() 和 play()）可以稳定实现这两个功能。关键在于监听播放状态、精准控制时间点，并在合适时机触发跳转或加载下一视频。
片头自动跳过（如跳过 15 秒片头广告）
原理是在视频开始播放时，立即检查当前时间是否处于片头区间，若是则跳过指定秒数；同时需防重复跳转，并兼容自动播放策略（如用户未交互时部分浏览器禁止自动播放音频）。
- 监听
timeupdate事件，在播放刚开始（currentTime < 1）时设置目标跳过时间（如currentTime = 15） - 用布尔标记（如
skippedIntro = false）避免多次跳转 - 若视频设置了
muted autoplay，多数浏览器允许静音自动播放；否则需用户首次交互后才可调用play() - 示例代码片段：
let skippedIntro = false;<br>video.addEventListener('timeupdate', () => {<br> if (!skippedIntro && video.currentTime < 1) {<br> video.currentTime = 15;<br> skippedIntro = true;<br> }<br>});
片尾自动连播（无缝切换到下一个视频）
利用 ended 事件监听播放结束，在事件触发后动态更换 src 或切换多个 <source>，再调用 load() 和 play() 启动下一段。
- 推荐预先加载下一视频的
src（如存在数组playlist），避免白屏等待 - 调用
video.load()重置媒体状态，再video.play()播放；注意捕获play()的 Promise 拒绝（如因策略被阻止） - 若需“无缝”效果（无黑场），可提前加载下一视频并使用两个
<video>元素交替播放（A 播完立刻显示 B 并播放） - 简单单视频连播示例：
let playlist = ['video1.mp4', 'video2.mp4'];<br>let currentIndex = 0;<br>video.addEventListener('ended', () => {<br> currentIndex = (currentIndex + 1) % playlist.length;<br> video.src = playlist[currentIndex];<br> video.load();<br> video.play().catch(e => console.warn('Auto-play prevented:', e));<br>});
增强体验的实用细节
真实场景中还需处理边界情况，让跳过和连播更自然可靠：
立即学习“前端免费学习笔记（深入）”；
-
跳过逻辑加固：除
timeupdate外，也监听loadedmetadata，确保元数据就绪后再设currentTime，防止跳转失败 -
连播防卡顿：对下一视频调用
video.preload = 'auto'或提前创建new Video().src = url触发预加载 - 用户可干预：提供“取消跳过”按钮或暂停后禁用自动跳过，尊重用户控制权（尤其对无障碍需求）
-
移动端适配：iOS Safari 要求用户手势触发首次
play()，连播时若无交互，第二次播放可能失败——建议加一个轻量提示或“继续观看”按钮
不依赖第三方库的最小可行方案
只要合理组合原生事件与属性，无需引入 Video.js 或 Plyr 等框架也能实现核心功能。重点是：用 timeupdate + 标记位 控制片头跳过，用 ended + src/load/play 驱动连播，并始终处理播放策略限制。复杂需求（如自定义片头时长、多段片尾、字幕同步）可在此基础上扩展状态管理。
