直接加 loop 属性即可实现视频循环播放，它是 HTML5 原生布尔属性，存在即生效，无需赋值；需确保视频加载成功、未被 pause 中断、避免 preload="none" 影响，并注意移动端需配合 muted 使用 autoplay。
直接加 loop 属性就行，不需要 JavaScript。
HTML5 loop 属性怎么用
这是原生支持的布尔属性，只要存在就生效，无需赋值。浏览器会自动在视频末尾跳回开头并继续播放。
-
loop是标准 HTML5 属性，所有现代浏览器（Chrome、Firefox、Safari、Edge）都支持 - 不要写成
loop="true"或loop="loop"—— 这样虽然多数情况下也生效，但不符合规范，且在某些严格解析环境（如部分 SSR 场景）可能被忽略 - 它和
autoplay可以共存，但注意：Safari 和新版 Chrome 对静音自动播放有策略限制，autoplay单独使用可能被拦截
为什么加了 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 状态管理更可控。
