video标签需HTTP协议、H.264+AAC编码MP4、controls属性三者齐备；file://协议被浏览器安全策略禁止；路径须相对或根相对；服务器需正确返回Content-Type；多格式fallback需按兼容性排序并设准确type。
video 标签能直接嵌入本地视频，但 90% 的失败不是写法错，而是环境、路径或编码没对齐——必须走 HTTP 协议、用 H.264+AAC 编码的 MP4、加 controls 属性，缺一不可。
为什么双击 HTML 文件时 video 标签不加载本地视频
Chrome/Firefox/Edge 在 file:// 协议下默认禁止加载本地媒体资源，这是安全策略，不是 bug。控制台会报 Not allowed to load local resource 或 net::ERR_FILE_NOT_FOUND，哪怕路径完全正确。
- 必须起本地 HTTP 服务：VS Code 装 Live Server 插件，或终端运行
npx serve/python3 -m http.server - 绝对路径（如
C:\videos\demo.mp4）和file://URL 都无效，浏览器直接拦截 - 开发阶段别改 Chrome 启动参数（如
--allow-file-access-from-files），新版已逐步失效，且无法交付
src 路径怎么写才真正有效
路径必须是相对 URL 或根相对 URL，且与 HTML 文件位置匹配；服务器返回的响应头 Content-Type 必须是 video/mp4，否则部分浏览器拒绝解析。
- HTML 在
/pages/index.html，视频在/assets/demo.mp4→ 写src="../assets/demo.mp4"（不能漏掉..） - HTML 在项目根目录，视频在
/videos/clip.mp4→ 写src="/videos/clip.mp4"（开头斜杠表示根） - 用 Python
http.server时，默认不识别.mp4，需手动配置 MIME 映射，否则返回text/plain导致黑屏
MP4 播不了？大概率是编码问题
浏览器只认特定封装和编码组合。Windows 剪映、手机相册导出的 MP4 经常是 HEVC（H.265）或 AAC 变体，Chrome/Firefox 直接拒解码。
立即学习“前端免费学习笔记（深入）”；
- 最稳组合：
video/mp4容器 + H.264 视频编码 + AAC 音频编码 - 用 ffmpeg 一键转码：
ffmpeg -i input.mp4 -c:v libx264 -c:a aac -movflags +faststart output.mp4（-movflags +faststart把 moov box 移到文件头，避免 Safari 白屏） - 别信“MP4 就一定行”——检查编码：右键视频 → 属性 → 详细信息，确认“视频编码”是 H.264，“音频编码”是 AAC
用 <source> 多格式 fallback 的实际要点
<source> 不是锦上添花，是绕过浏览器解码差异的刚需。单靠 src="demo.mp4" 在 Safari（HEVC 友好）、Firefox（VP9 友好）、Chrome（H.264 最稳）之间极易失败。
- 每个
<source>必须带准确type属性：type="video/mp4"不能写成type="video/mpeg4" -
<video>上不能再写src，否则所有<source>被忽略 - 顺序即 fallback 优先级：把兼容性最广的
video/mp4放最后，把更轻量但支持度稍低的video/webm放前面 -
<source>只声明候选，不触发下载；浏览器 runtime 自行选择第一个能解码的，你无法干预
最容易被忽略的是：即使代码全对，若视频文件本身 moov box 在末尾（常见于手机直录 MP4），Safari 会卡在 loading 状态——必须用 ffmpeg -movflags +faststart 重写文件头，这不是可选项，是 Safari 生存必需。
