loop属性仅对video和audio有效,必须作为布尔属性使用(如<video loop>或video.loop=true),且需配合muted才能在现代浏览器中正常循环;iOS Safari还需playsinline并依赖用户手势触发play()。

loop 属性只对 <video> 和 <audio> 有效,写错位置、漏 muted、或指望它在 <img> 上起作用,就完全不会循环。
loop 属性必须写成布尔属性,不能带值
浏览器只检测该属性是否存在,不解析它的值。以下写法全部无效:
<video loop="true"><video loop="1">-
<video loop="">(空字符串在部分旧环境可能被忽略)
正确写法只有两种:
- 静态 HTML:
<video src="v.mp4" loop> - JS 动态控制:
video.loop = true(注意是布尔值true,不是字符串"true")
用 setAttribute('loop', 'true') 也无效——它只是加了个无意义的字符串属性,不会触发循环逻辑。
立即学习“前端免费学习笔记(深入)”;
不加 muted,loop 很可能根本没机会启动
现代浏览器(Chrome 120+、Edge、Safari macOS/iOS)普遍阻止未静音的自动播放。而 loop 的重播行为依赖视频“已开始播放”这个前提。如果 autoplay 因有声被拦截,视频卡在第一帧,loop 就永远不会触发。
使用 PptxGenJS 和 Python 解析,将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint(.pptx)演示文稿。
- 背景视频等静音场景:必须组合
autoplay muted loop - iOS Safari 还额外要求
playsinline,否则强制全屏,破坏布局 - 想后续开声音?得等用户手势(如点击)后,再执行
video.muted = false; video.play()
检查是否加载成功,可打印 video.readyState:≥ 4 表示已就绪;为 0 表示未加载或被拦截。
监听 ended 事件和 loop 并不冲突,但行为容易误判
即使写了 loop,ended 事件仍会触发——它反映的是“本次播放结束”的瞬间,不是“循环被禁用”。很多人因此以为 loop 失效了,其实只是没意识到事件和重播是并行发生的。
- 想做循环计数?
loop不提供钩子,只能切到ended+ 手动currentTime = 0 - 想中途暂停某次循环?
loop不支持,必须用 JS 控制pause()和play() - 同时用了
loop和ended重播逻辑?行为不可控,建议二选一:声明式用loop,命令式就移除它
手动重播要小心 Promise 拒绝:调用 play() 时若未满足静音/手势条件,会抛出错误,需 .catch(e => console.warn(e)) 捕获。
iOS Safari 的 loop 是“半生效”状态
它允许循环,但不保证自动启动。哪怕写了 autoplay loop muted,首次播放仍需用户点击触发 play(),否则整个流程卡住。
-
<video autoplay loop muted>在 iOS 上 ≈ 没写autoplay和loop - 必须用用户手势显式调用
video.play().catch(...)才能激活循环链路 - 视频含音频且未
muted?loop直接被忽略,连尝试都不会有
真正麻烦的不是怎么写 loop,而是它不暴露循环次数、不支持中断某次、也不反馈重播时机——这些都得靠 JS 补足,别硬扛属性本身。


















