直接双击打开html文件提示“媒体格式不支持”是因浏览器禁止file://协议加载本地音视频，需用python -m http.server启http服务并为标签显式指定type属性。
为什么直接双击打开 HTML 文件会提示“媒体格式不支持”
浏览器出于安全策略，默认禁止本地（file:// 协议）HTML 文件加载音视频资源，尤其是 <video></video> 标签中使用相对路径的 MP4、WebM 等文件。这不是你文件坏了，也不是编码问题，而是 Chrome、Edge、Firefox 等现代浏览器主动拦截——它们拒绝从本地磁盘读取二进制媒体流，报错常为：Failed to load resource: net::ERR_FILE_NOT_FOUND 或控制台显示 The video on this page can't be played. Your browser may not support the video format.
用 python -m http.server 快速起一个本地 HTTP 服务
绕过 file:// 限制最轻量、无需安装额外工具的方法：启动一个本地 HTTP 服务器，让页面走 http://localhost:8000/ 而非 file:///xxx/index.html。
- 确保当前目录下有
index.html和同级的video.mp4 - 终端进入该目录，执行：
python3 -m http.server 8000
（Windows 用户若默认是 Python 2，请用python -m http.server 8000） - 浏览器访问
http://localhost:8000/index.html，视频即可正常加载播放 - 该命令只依赖系统自带 Python，无须配置、无后台进程残留，关掉终端即停止服务
<video></video> 标签必须显式指定 type 属性
即使走 HTTP 服务，部分浏览器（特别是 Safari 和旧版 Firefox）仍可能因 MIME 类型缺失而拒绝播放。服务器未正确返回 Content-Type 时，浏览器无法判断文件类型，就会静默失败。
- 不要只写：
<source src="video.mp4"></source> - 务必补全
type：<source src="video.mp4" type="video/mp4"></source> - 推荐同时提供 WebM 备选（提升兼容性）：
<video controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> </video>
- MP4 文件需用 H.264 + AAC 编码；可用
ffprobe video.mp4验证，避免 HEVC（H.265）或 AV1 等不被广泛支持的编码
开发阶段别用 VS Code Live Server 插件替代真实服务逻辑
VS Code 的 Live Server 插件确实能一键启服务并自动刷新，但它默认启用 CORS 代理、重写路径、注入脚本——这些在调试视频时反而会干扰行为。比如它可能把 video.mp4 错误地映射为文本响应，或对请求头做不可见修改。
立即学习“前端免费学习笔记（深入）”；
- 仅用于快速预览静态页面？可以开
- 一旦视频加载失败、进度条卡死、
canplay事件不触发，立刻切回原生命令行服务（python -m http.server），排除插件干扰 - 如需 HTTPS 或自定义 header（例如设置
Accept-Ranges: bytes支持拖拽），Live Server 不支持，必须换serve（npm）、http-server或 Python 的http.server扩展版
http://，再检查 <source></source> 有没有带 type。 
