HTML5中video和audio的loop属性为布尔型，直接写loop即可生效；必须搭配autoplay才能自动循环，且audio更适合作为背景音乐，移动端需注意浏览器自动播放策略限制。
video 和 audio 标签的 loop 属性直接加就行
HTML5 原生支持循环播放，不需要 JS 或额外库。只要在 <video> 或 <audio> 标签里写上 loop 属性（布尔属性），浏览器就会自动重复播放。
常见错误是写成 loop="true" 或 loop="1" —— 这些都无效。正确写法就是裸属性：loop 本身存在即生效。
<video src="bg.mp4" loop autoplay muted></video><audio src="bg.mp3" loop autoplay></audio>- 必须搭配
autoplay才能自动循环；否则用户得点一次才开始，再点一次才循环 - Chrome 等浏览器对无交互触发的音频自动播放有限制：未静音的
<audio>若没加muted，即使写了autoplay也可能被拦截
背景音乐用 audio 更合适，别硬套 video
如果只是想放一段 BGM（比如网页加载后一直循环的轻音乐），用 <audio> 是语义正确、体积小、兼容性好、控制简单的方案。用 <video> 加静音视频当背景音乐，属于绕路且浪费资源。
典型误用场景：为了“隐藏”播放器，把 <video> 宽高设为 0 或 display: none，结果发现 iOS Safari 下 loop 失效、或静音状态下仍无法自动播放。
立即学习“前端免费学习笔记（深入）”；
- 移动端（尤其是 iOS）对
<video>的自动播放策略更严格，即使muted+autoplay+loop，也常需用户首次触摸后才能启动 -
<audio>在桌面端几乎无限制；移动端仍建议加muted（哪怕没声音）来提高自动播放成功率 - 若真要用视频做动态背景，优先选 WebM 格式（比 MP4 更小），并确保第一帧是关键帧，避免 loop 切换时黑屏
loop 不起作用？先检查这三件事
写了 loop 却不循环，90% 是以下某个环节卡住了，而不是属性本身失效。
- 媒体文件是否加载成功？打开 DevTools 的 Network 面板，确认
src地址返回 200，且响应头包含Accept-Ranges: bytes（否则 Safari 可能拒绝 loop） - 是否被浏览器策略拦截？看 Console 有没有类似
The play() request was interrupted by a call to pause()或Autoplay is only allowed when approved by the user - 是否在非 HTTPS 环境下调用了
autoplay？HTTP 页面下 Chrome 80+ 已默认禁用所有自动播放（含静音）
需要精准控制循环起点/终点？loop 不够用，得用 JS
loop 是全片循环，没法跳过片头 2 秒、也不能在第 15 秒戛然而止再重来。这种需求必须监听 timeupdate 和 ended 事件手动控制。
例如实现「只循环中间 10 秒」：
const audio = document.querySelector('audio');
audio.addEventListener('timeupdate', () => {
if (audio.currentTime >= 15 && audio.currentTime < 25) return;
if (audio.currentTime >= 25) audio.currentTime = 15;
});
注意：频繁修改 currentTime 在部分安卓 WebView 中可能触发解码重置，造成卡顿；iOS 上则可能因节电策略延迟响应。
真正复杂的循环逻辑（比如变速循环、交叉淡入淡出），别硬扛，该上 Howler.js 或 tone 这类音频库就上。
