HTML5的loop属性可实现视频自动循环播放，需配合muted和autoplay才能在现代浏览器中正常工作；注意首尾帧对齐、faststart编码及移动端静音要求。
HTML5 的 loop 属性能让视频自动重复播放，特别适合用作网页背景视频——无需额外 JavaScript，一行属性就能实现无缝循环。
loop 属性的基本写法
在 <video></video> 标签中添加 loop 即可启用循环：
注意：必须配合 muted（静音）和 autoplay 才能在大多数浏览器（尤其是 Chrome、Safari）中自动播放。现代浏览器普遍禁止有声音的自动播放。
立即学习“前端免费学习笔记（深入）”；
背景视频循环的关键细节
仅加 loop 不代表视觉上“无缝”。实际效果受以下因素影响：
- 视频末尾帧与首帧内容不一致时，会出现明显跳变——建议导出视频时让结尾几帧淡出并静止在起始画面，或使用关键帧对齐首尾
- 部分 MP4 编码（如未用
-movflags +faststart）会导致加载完成前无法循环，建议用 FFmpeg 预处理：
ffmpeg -i input.mp4 -c:v libx264 -c:a aac -movflags +faststart output.mp4 - 移动端 Safari 对
loop支持稳定，但若视频含音频且未静音，会忽略loop和autoplay
增强循环体验的实用补充
纯 HTML 属性有时不够灵活，可搭配少量 JS 提升可靠性：
- 监听
ended事件手动重播：
video.addEventListener('ended', () => video.currentTime = 0); - 用
object-fit: cover和width: 100%; height: 100%让视频铺满容器，避免拉伸或留黑边 - 为兼容性考虑，可同时提供 WebM 格式（更小体积、更好压缩），用
<source></source>多格式回退
避免常见失效问题
如果 loop 没生效，优先检查：
- 是否遗漏
muted——这是当前最常被忽略的硬性要求 - 视频是否真正加载完成？可在控制台打印
video.readyState，确保 ≥ 4 - 是否在本地文件系统（
file://）直接打开？部分浏览器会禁用自动播放策略，需部署到本地服务器（如 Live Server）测试 - CSS 是否意外设置了
display: none或visibility: hidden，导致视频暂停循环
