video标签不加载MP4主因是路径错误或MIME类型不匹配，需用HTTP服务而非file://协议，正确配置src与source的type属性，并添加muted、playsinline等属性适配移动端自动播放。
video 标签不加载 MP4，检查 src 路径和 MIME 类型
浏览器拒绝播放视频，大概率不是代码写错，而是文件没被正确识别。常见现象是页面只显示空白区域或“×”图标，控制台报 Failed to load resource: net::ERR_ABORTED 或 The media could not be loaded。
关键点：路径必须相对或绝对有效，且 Web 服务器需返回正确的 Content-Type（如 video/mp4）。本地双击 HTML 文件打开时，file:// 协议下部分浏览器（尤其是 Chrome）会直接禁用 video 加载，必须走 HTTP 服务。
- 用
http-server、python3 -m http.server或 VS Code Live Server 启一个本地服务再测 -
src值别写成./video/xxx.mp4却把文件放在videos/目录下——路径大小写、斜杠方向、拼写全要对 - 如果用 Nginx/Apache，确认配置里已声明
.mp4的 MIME 类型，否则可能返回text/plain
支持多格式回退，用 source 标签而非只靠 src
单写 <video src="a.mp4"></video> 看似简单，但 iOS Safari 对某些编码的 MP4 支持差，Firefox 不支持 WebM 外的某些封装，纯靠一个格式容易白屏。
真正健壮的做法是提供多个 <source></source>，让浏览器自己选能播的那个。顺序很重要：浏览器按从上到下尝试，第一个能解码的就用。
立即学习“前端免费学习笔记（深入）”；
- 优先放 H.264+AAC 编码的 MP4（兼容性最广），再补 WebM（VP9/Vorbis，体积小、开源友好）
-
type属性必须写准，比如type="video/mp4"，不能漏掉video/前缀 - 别在
<video></video>上写src，否则浏览器可能忽略所有<source></source>
<video controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> </video>
移动端自动播放失败？加 muted 和 playsinline
iOS 和 Android 浏览器默认禁止有声自动播放，哪怕写了 autoplay，也会静音或直接卡住。现象是页面加载后视频不动，控制台可能提示 play() failed because the user didn't interact with the document first。
解决思路不是“绕过限制”，而是适配规则：浏览器允许静音自动播放，也允许内联播放（避免全屏跳转）。
- 必须同时加
autoplay muted—— 少一个都无效 - iOS 需额外加
playsinline，否则点开就进全屏模式，体验断裂 - 如果业务真需要有声自动播放，只能等用户第一次触摸/点击后，再调用
video.play()
用 preload 控制初始加载行为，别默认全加载
preload 默认值是 metadata（只下头信息），但很多开发者误以为它会预加载画面，或干脆删掉它任由浏览器瞎猜。结果要么首屏卡顿（auto 下整段视频提前下载），要么点击播放后黑屏等待太久（none 下啥都不下）。
实际选择看场景：
- 背景视频 / 主视觉轮播：用
preload="auto"，但务必压缩体积、限制分辨率（如 720p 以内） - 普通内容视频（如教程、访谈）：保持默认
preload="metadata"最稳妥 - 流量敏感场景（如移动端详情页）：显式写
preload="none"，等用户 hover 或 focus 再触发加载
注意：preload 是提示，不是指令，浏览器可忽略。Safari 在低电量模式下会强制降级为 metadata。
file:// 协议跑不通——这不是你代码的问题，是浏览器故意的。换 HTTP 服务，再一条条核对 source 路径、type、muted，基本就稳了。 
