HTML5视频自动循环播放代码教学

想让HTML5视频无缝循环播放？其实只需在`

直接加 loop 属性就行，不需要 JavaScript。

HTML5 标签的 loop 属性怎么用

这是原生支持的布尔属性，只要存在就生效，无需赋值。浏览器会自动在视频末尾跳回开头并继续播放。

• loop 是标准 HTML5 属性，所有现代浏览器（Chrome、Firefox、Safari、Edge）都支持
• 不要写成 loop="true" 或 loop="loop" —— 这样虽然多数情况下也生效，但不符合规范，且在某些严格解析环境（如部分 SSR 场景）可能被忽略
• 它和 autoplay 可以共存，但注意：Safari 和新版 Chrome 对静音自动播放有策略限制，autoplay 单独使用可能被拦截

<video controls loop>
  <source src="demo.mp4" type="video/mp4">
</video>

为什么加了 loop 还不重播？常见原因

不是属性写错了，而是被其他行为或设置覆盖了。

• 视频加载失败（src 路径错误、MIME 类型不匹配、跨域限制）→ 浏览器根本没加载成功，自然不会触发循环逻辑
• 手动调用了 video.pause() 或监听了 ended 事件后执行了 video.currentTime = 0 却忘了 video.play() → 此时 loop 已失效，因为播放已中断
• 设置了 preload="none" 且用户未手动点击播放 → 视频未预加载，loop 在首次播放完成前无意义
• 移动端 Safari 对 loop + autoplay 的组合支持不稳定，尤其未静音时，建议搭配 muted 使用

需要 JS 控制循环时该怎么做（比如加延迟、换素材、统计次数）

如果只是循环播放，别用 JS；但如果要干预行为（比如播完等 1 秒再重播，或切换不同视频），就得监听 ended 事件。

• ended 事件只在自然播放结束时触发（非用户暂停/拖拽导致），比轮询 currentTime 更可靠
• 手动重播必须显式调用 play()，否则只重置时间但不播放（尤其在移动设备上）
• 注意 Promise 返回值：现代浏览器中 play() 可能返回 Promise，需处理拒绝（如用户手势未触发、音频未静音）

const video = document.querySelector('video');
video.addEventListener('ended', () => {
  video.currentTime = 0;
  video.play().catch(e => console.warn('Auto-replay failed:', e));
});

真正容易被忽略的是：当视频源动态变更（比如通过 JS 修改 src）后，loop 属性依然有效，但浏览器会重新加载——此时如果网络慢或资源大，可能出现“黑屏卡顿”，而不是无缝循环。这种场景下，用 ended + loadstart 状态管理更可控。

以上就是《HTML5视频自动循环播放代码教学》的详细内容，更多关于的资料请关注golang学习网公众号！