video标签自动播放需同时设置autoplay和muted属性，仅autoplay无效；iOS还需playsinline确保内联播放，动态换源后须手动调用load()和play()。
video 标签不自动播放？检查 autoplay 和 muted 的组合
现代浏览器（Chrome、Edge、Safari）默认禁止有声音的自动播放，autoplay 单独写无效。必须同时设置 muted 才可能触发自动播放：
<video autoplay muted loop> <source src="clip.mp4" type="video/mp4"> </video>
如果视频需要带声播放，用户必须先与页面交互（如点击按钮），再用 JS 调用 play()。否则会抛出 NotAllowedError 错误。
- 仅设
autoplay→ 大概率静音卡住或直接忽略 - 设
autoplay+muted→ 可静音自动启播（推荐用于背景视频、轮播页首帧） - 设
autoplay+controls→ 控制栏显示，但播放仍受静音限制
video 加载失败常见原因和 fallback 处理
<source> 标签顺序和格式兼容性直接影响能否播放。浏览器按顺序尝试每个 src，遇到第一个能解码的就停。常见失败包括：
- 服务器未正确配置 MIME 类型（如返回
text/plain而非video/mp4） - 路径错误或跨域未开启 CORS（尤其用
preload="metadata"时） - 视频编码不支持：Safari 不支持 VP9，Firefox 对 H.265 支持有限
建议至少提供 MP4（H.264+AAC）和 WebM（VP8/VP9+Vorbis/Opus）双格式，并用 onerror 监听失败：
<video controls> <source src="video.webm" type="video/webm"> <source src="video.mp4" type="video/mp4"> 您的浏览器不支持 video 标签。 </video>
控制台报错 “DOMException: The element has no supported sources” 怎么办
这个错误本质是 <video> 找不到任何可播放的 <source>，不是网络问题，而是解析失败。重点排查以下几项：
-
type属性拼写错误，比如写成video/mep4或漏掉引号 -
src是相对路径但当前 HTML URL 有 hash（如page.html#section），导致路径解析异常 - 视频文件实际损坏，或虽能下载但容器格式异常（如 .mp4 文件头被截断）
- 使用了
blob:URL 但对象 URL 已被URL.revokeObjectURL()提前释放
快速验证方法：把 src 地址单独粘贴到新标签页打开，看是否能直接播放。不能 → 文件或服务问题；能 → 检查 HTML 中的 type 和路径上下文。
移动端 iOS Safari 的 video 行为特殊点
iOS Safari 强制全屏播放，且禁用 playsinline 以外的所有内联行为。不加这个属性，哪怕加了 webkit-playsinline 也无效：
<video playsinline webkit-playsinline controls> <source src="inline.mp4"> </video>
另外注意：
- 即使写了
autoplay+muted，iOS 10+ 仍可能因“用户未与页面交互过”而拒绝播放（尤其微信内置浏览器） -
preload="auto"在移动 Safari 上基本被忽略，它只按需加载首帧 - 用
videoWidth/videoHeight读尺寸前，务必等loadedmetadata事件，否则返回 0
最稳妥的内联播放方案：用户点击后调用 play()，并确保 playsinline 存在、视频已静音或用户已授权音频。
