本地双击打开HTML文件时video标签无法加载本地视频，因浏览器禁用file://协议下的资源加载以保障安全；需通过本地服务器或input文件选择方式解决。
直接用 标签就能嵌入本地视频，但浏览器出于安全限制，**双击打开 HTML 文件（即 file:// 协议）时，大部分现代浏览器会拒绝加载本地 src 视频**——这不是写法错，是机制问题。
为什么
Chrome、Edge、Firefox 默认禁用 file:// 下的本地资源加载（包括视频、音频、XMLHttpRequest），防止恶意 HTML 文件读取用户硬盘文件。即使路径完全正确，控制台也会报类似错误：
Not allowed to load local resource: file:///path/to/movie.mp4
这不是路径写错了，也不是格式不支持，而是协议层面被拦截。
真正能跑通的两种做法
必须绕过 file:// 限制，只有两条路可走：
立即学习“前端免费学习笔记（深入）”；
- 用本地开发服务器启动页面（推荐）：比如 Python 的
python -m http.server、Node.js 的http-server，让页面运行在http://localhost:8000下 - 改用
让用户手动选视频，再通过URL.createObjectURL()播放——适合上传预览场景，不适用于“默认加载固定本地文件”
硬改浏览器启动参数（如 Chrome 加 --allow-file-access-from-files）仅限临时调试，不可交付、不跨设备、新版 Chrome 已逐步失效。
写法本身很简单，但要注意兼容性和 fallback：
- 必须加
controls属性，否则没播放控件（静音自动播放也需muted+autoplay） - 推荐同时提供
.mp4（H.264）和.webm（VP9）两种格式，覆盖更多浏览器： - 不要依赖
preload="auto"在本地环境生效——file://下它常被忽略 - 路径用相对路径（如
./videos/demo.mp4），避免绝对路径（C:\xxx或/home/xxx）——后者在他人机器上必然失败
调试时最容易卡住的三个点
不是代码不会写，而是卡在这几个“看不见”的环节：
- 视频文件实际没放在项目目录里，或大小写拼错（
Movie.MP4≠movie.mp4） - 用 VS Code Live Server 插件却没右键“Open with Live Server”，还是双击 HTML —— 本质仍是
file:// - 视频编码格式不被浏览器支持：比如用 FFmpeg 导出时选了 AV1 编码（
libsvtav1），Chrome 旧版、Safari 目前都不认
确认是否跑通，最简单的验证方式：打开浏览器开发者工具 → Network 标签页 → 刷新页面 → 看视频文件是否返回 200，而不是 0 或 blocked。
