HTML视频标签怎么实现片头跳过与片尾自动连播-H5教程-PHP中文网

html 标签可通过 javascript 实现片头跳过和片尾自动连播：片头跳过利用 currenttime 配合 loadeddata 事件与标志位控制；片尾连播监听 ended 事件，更新 src 后调用 load() 和 play()，并处理移动端自动播放限制。

html视频标签怎么实现片头跳过与片尾自动连播

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"` 即可；若要顺序播放多个视频，则需维护播放列表。

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

更换 `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>