加 loop 属性仅实现逻辑循环，真正无缝自动播放需 autoplay、muted、loop 三者协同，并配合 playsinline、视频首尾帧对齐、faststart 编码优化及 WebM 备用格式；iOS 需特别注意 muted 强制要求，必要时用 JS ended 事件手动重播。
加 loop 属性就能让 HTML5 视频自动重复播放，但要真正实现自动启动 + 无缝循环，光写 loop 远不够——关键在三个属性协同、视频准备和细节处理。
必须同时启用 autoplay、muted 和 loop
现代浏览器（Chrome、Safari、Edge）默认阻止有声视频自动播放，静音是硬性前提：
-
autoplay：触发页面加载即开始播放 -
muted：绕过自动播放限制，否则autoplay会被静默拦截 -
loop：原生布尔属性，存在即生效（别写loop="true"，直接写loop即可）
正确写法示例：
<video autoplay muted loop playsinline><source src="bg.mp4" type="video/mp4"></source></video>
playsinline 对 iOS 很重要，防止视频强制全屏。
确保视觉上“无缝”，不只是逻辑循环
首帧和末帧内容不一致时，循环会明显跳变。解决方法：
- 导出视频时让结尾几帧淡出并停在起始画面（如最后一秒冻结在第一帧）
- 或用剪辑软件对齐关键帧，使首尾画面内容自然衔接
- 避免快切、突然黑场、字幕闪入等破坏连贯性的结尾设计
视频编码与加载优化不可跳过
未优化的 MP4 可能加载完成前无法触发循环，尤其大文件：
- 用 FFmpeg 添加
faststart元数据（把 moov 头移到文件开头）：ffmpeg -i input.mp4 -c:v libx264 -c:a aac -movflags +faststart output.mp4
- 建议提供 WebM 备用格式（体积更小、解码更快），用
<source src="bg.webm" type="video/webm"><source src="bg.mp4" type="video/mp4"></source></source>
移动端兼容性要单独验证
iOS Safari 对 loop 支持较弱，尤其未静音或未用户交互时：
- 必须带
muted autoplay loop，缺一不可 - 若需音效，只能在用户点击后解除静音：
video.muted = false; video.play() - Android 主流浏览器基本无此限制，但部分国产浏览器可能模仿 iOS 行为
备选方案：JS 监听 ended 手动重播
当原生 loop 不稳定（如某些 WebView 或旧版 Safari），可用 JS 补充：
const video = document.querySelector('video');
video.addEventListener('ended', () => {
video.currentTime = 0;
video.play().catch(e => console.log('重播被阻止:', e));
});
注意：play() 可能返回 Promise，需 .catch() 捕获拒绝（常见于静音未开或用户未交互）。
不复杂但容易忽略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
