HTML Loop属性：控制视频音频循环播放方法

HTML的`loop`属性看似简单，实则在现代浏览器尤其是iOS Safari中充满陷阱：它仅对`

loop 属性只对 和 有效，写错位置、漏 muted、或指望它在 上起作用，就完全不会循环。

loop 属性必须写成布尔属性，不能带值

浏览器只检测该属性是否存在，不解析它的值。以下写法全部无效：

• （空字符串在部分旧环境可能被忽略）

正确写法只有两种：

• 静态 HTML：
• JS 动态控制：video.loop = true（注意是布尔值 true，不是字符串 "true"）

用 setAttribute('loop', 'true') 也无效——它只是加了个无意义的字符串属性，不会触发循环逻辑。

不加 muted，loop 很可能根本没机会启动

现代浏览器（Chrome 120+、Edge、Safari macOS/iOS）普遍阻止未静音的自动播放。而 loop 的重播行为依赖视频“已开始播放”这个前提。如果 autoplay 因有声被拦截，视频卡在第一帧，loop 就永远不会触发。

• 背景视频等静音场景：必须组合 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()，否则整个流程卡住。

• 在 iOS 上 ≈ 没写 autoplay 和 loop
• 必须用用户手势显式调用 video.play().catch(...) 才能激活循环链路
• 视频含音频且未 muted？loop 直接被忽略，连尝试都不会有

真正麻烦的不是怎么写 loop，而是它不暴露循环次数、不支持中断某次、也不反馈重播时机——这些都得靠 JS 补足，别硬扛属性本身。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~