HTML <video> 标签可通过 JavaScript 实现片头跳过和片尾自动连播：片头跳过利用 currentTime 配合 loadeddata 事件与标志位控制；片尾连播监听 ended 事件，更新 src 后调用 load() 和 play()，并处理移动端自动播放限制。
HTML `
片头跳过（播放时自动跳过前几秒）
利用 `currentTime` 属性在视频开始播放前或播放中设置起始时间，配合 `loadeddata` 或 `play` 事件触发跳转。
- 监听 `loadeddata` 事件（确保元数据已加载），将 `currentTime` 设为跳过时长（如 5 秒）
- 注意：若视频未缓冲到目标时间，跳转会失败，建议同时设置 `preload="metadata"` 或 `preload="auto"`
- 避免重复跳转，可用标志位控制只执行一次
示例代码：
<video id="myVideo" src="video.mp4" preload="metadata"></video>
<script>
const video = document.getElementById('myVideo');
let skipped = false;
video.addEventListener('loadeddata', () => {
if (!skipped && video.duration > 5) {
video.currentTime = 5;
skipped = true;
}
});
</script>
片尾自动连播（当前视频结束立即播放下一个）
监听 `ended` 事件，在触发后更新 `src` 并调用 `play()`。若需循环播放同一视频，直接设 `loop="true"` 即可；若要顺序播放多个视频，则需维护播放列表。
立即学习“前端免费学习笔记（深入）”；
- 更换 `src` 后需调用 `load()` 方法重新加载元数据，再调用 `play()` 才能可靠播放
- 移动端 Safari 等浏览器可能因自动播放策略限制而静音播放，建议添加 `muted` 和 `autoplay` 属性
- 可结合 `canplay` 事件确保新视频加载完成后再播放，提升稳定性
示例（双视频连播）：
<video id="myVideo" src="1.mp4" muted autoplay></video>
<script>
const video = document.getElementById('myVideo');
const playlist = ['1.mp4', '2.mp4'];
let currentIndex = 0;
video.addEventListener('ended', () => {
currentIndex = (currentIndex + 1) % playlist.length;
video.src = playlist[currentIndex];
video.load();
video.play().catch(e => console.log('自动播放被阻止，需用户交互', e));
});
</script>
兼顾体验的实用建议
真实场景中需处理兼容性与用户体验细节：
- 跳过片头时，可同步隐藏或跳过片头广告区域（如有），需配合时间轴标记或服务端返回的跳过点
- 连播时若网络较慢，可显示加载提示，或预加载下一视频的 `preload="metadata"`
- 用户手动拖拽进度条后，应重置跳过逻辑，避免误跳
- 移动端注意 `autoplay` 限制：必须 `muted`，且首次播放最好由用户手势触发（如点击按钮）
替代方案：使用 Media Session API 增强控制（可选进阶）
若需更精细控制（如锁屏播放、通知栏控制），可配合 `navigator.mediaSession` 设置元数据与事件处理，但不影响片头跳过和连播核心逻辑。
