loop属性仅使video/audio元素播放完毕后自动跳回开头重播，仅原生媒体元素支持，失效常见于未静音、资源加载失败或file://协议下；ios safari中需用户交互触发且需playsinline；复杂需求应改用javascript控制。

loop 属性只做一件事：让 <video></video> 或 <audio></audio> 播放到末尾时自动跳回开头重播。它不计数、不发事件、不控制静音、也不管资源有没有加载成功——只要媒体进入了“已播放”状态，它就起效。

哪些标签能用 loop，哪些写了也白写

只有原生媒体元素支持：<video></video> 和 <audio></audio>。其他所有标签加了都无效：

• <img src="x.gif" loop>：GIF 自带循环逻辑，loop 被浏览器完全忽略
• <canvas></canvas>、<iframe></iframe>、<div>：根本不解析该属性，控制台零提示 <li> <code><video></video> 外层容器（如 <div class="video-wrapper">）加 <code>loop：无意义，属性必须落在媒体元素自身上

  loop 为什么加了也不循环？最常踩的三个坑

  不是属性写错，而是前提没满足。常见失效链路如下：

  • 没加 muted → 浏览器阻止 autoplay → 视频根本没播起来 → loop 无从触发
  • 视频 src 404 或跨域失败 → network 面板可见请求错误 → readyState 停在 0 或 1 → loop 不生效
  • 在 file:// 协议下直接双击 HTML 打开 → Chrome/Edge 禁用自动播放策略 → 即使写了 autoplay muted loop 也卡住

  验证是否真生效：打开控制台，执行 document.querySelector('video').loop，返回 true 仅说明属性被识别，不代表正在循环；要确认行为，得看 video.currentTime 是否在末尾后跳回 0。

  

  Wechat HTML Publisher

  直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

  下载

  移动端 iOS Safari 的 loop 特别在哪

  iOS Safari 对 loop 的支持是“有但不可靠”，尤其在自动播放场景：

  • <video autoplay loop muted></video> 在 iOS 上等同于没写 autoplay 和 loop —— 必须由用户点击/触摸触发 play() 后，loop 才真正激活
  • 即使静音，若视频未完全解码（比如网络抖动导致缓冲中断），播放停在末尾也不会触发下一轮 —— 它只响应“正常结束”，不响应“异常中止”
  • 必须加 playsinline，否则视频会强制全屏，破坏页面布局，且全屏状态下 loop 行为更难预测

  绕过方案不是硬扛 loop，而是监听 ended 事件 + currentTime = 0 + play()，并用 .catch() 捕获 iOS 的播放拒绝。

  什么时候该放弃 loop，改用 JavaScript 控制

  原生 loop 是声明式开关，一旦需求超出“无限重播”这个范围，就得切到 JS：

  • 需要知道“这是第几次循环” → loop 不提供计数，只能自己维护变量 + ended 事件
  • 想循环前 30 秒、跳过片尾黑帧 → loop 只能从头播，得手动设 currentTime 并控制 play()
  • 首尾帧衔接不自然（比如结尾突然黑屏）→ loop 无法微调起始点，需用 currentTime = 0.05 跳过瑕疵帧
  • 音频需淡出再重播 → loop 无过渡能力，必须用 AudioContext 或 Web Audio API 调度

  真正麻烦的从来不是怎么写 loop，而是它不暴露任何中间状态。一旦你开始关心“循环发生了没有”“现在播到哪一帧”“能不能暂停在某次循环中途”，它就不再是首选方案。