本地视频在html5中无法通过file://协议播放是浏览器安全策略所致，需启动本地http服务（如python的http.server）并确保路径正确、格式兼容（优先mp4）、标签属性合理（autoplay+muted+preload="metadata"）。
本地视频在 HTML5 中无法直接用 file:// 协议播放，这是浏览器安全策略决定的，不是代码写错了。
为什么 <video></video> 标签写对了却没画面
主流浏览器（Chrome、Edge、Firefox）默认禁止通过 file:// 协议加载本地媒体文件——哪怕路径完全正确，控制台也会报 NotAllowedError: play() can only be initiated by user gesture 或更常见的静默失败（无报错但黑屏）。这不是你的标签漏了 controls，也不是视频格式不对，而是协议层被拦住了。
- 仅当页面由本地 HTTP 服务提供时（如
http://localhost:8000），<video src="xxx.mp4"></video>才能正常加载和播放 -
file://下连fetch()读取本地文件都会被 CORS 阻止，更别说自动解码播放 - 部分旧版 Safari 在
file://下允许播放，但行为不一致，不可依赖
快速起一个本地 HTTP 服务（3 种实操方式）
不用装完整开发环境，几条命令就能跑起来。选一个你机器上最顺手的：
- Python 3（含
http.server）：python -m http.server 8000，然后访问http://localhost:8000打开含<video></video>的 HTML 文件 - Node.js（全局装过
http-server）：http-server -p 8000，同上访问 - VS Code 安装插件「Live Server」，右键 HTML 文件 → 「Open with Live Server」，自动唤起
http://127.0.0.1:5500/xxx.html
注意：所有视频文件必须和 HTML 文件在同一目录下，或使用相对路径（如 src="videos/demo.mp4"），且该子目录也要在服务根目录内。
立即学习“前端免费学习笔记（深入）”；
<video></video> 标签里真正影响本地播放的关键属性
服务跑起来后，标签本身要避开几个常见低级错误：
- 必须加
src，不能只靠<source></source>；<video></video>不会自动尝试<source></source>的 fallback，除非显式调用load() - 加
preload="metadata"比preload="auto"更稳妥——避免浏览器一加载就试图下载整个大视频文件 - 如果想自动播放（尤其做演示），必须同时满足：
autoplay+muted，否则现代浏览器会强制拦截 - 支持格式优先选
.mp4（H.264 + AAC），.webm可作为备选，但不要指望.avi或.mov直接工作
最小可用示例：
<video controls autoplay muted preload="metadata"> <source src="demo.mp4" type="video/mp4"> </video>
调试时容易忽略的两个硬限制
即使服务和标签都对了，仍可能卡住：
- 视频文件路径是区分大小写的（尤其 macOS/Linux），
Demo.mp4和demo.mp4是两个文件 - 某些编码参数（如 HEVC/H.265 的 MP4）虽是合法格式，但 Chrome 和 Firefox 默认不支持解码，播放器会显示空白或报
MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED
遇到黑屏又没报错？先用 VLC 打开视频确认它本身能播，再检查控制台有没有 ERR_CONNECTION_REFUSED（服务没起）或 MEDIA_ERR_SRC_NOT_SUPPORTED（编码问题）。
