直接双击打开HTML文件提示“媒体格式不支持”是因浏览器禁止file://协议加载本地音视频，需用python -m http.server启HTTP服务并为<source>标签显式指定type属性。

为什么直接双击打开 HTML 文件会提示“媒体格式不支持”

浏览器出于安全策略，默认禁止本地（file:// 协议）HTML 文件加载音视频资源，尤其是 <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> 标签必须显式指定 type 属性

即使走 HTTP 服务，部分浏览器（特别是 Safari 和旧版 Firefox）仍可能因 MIME 类型缺失而拒绝播放。服务器未正确返回 Content-Type 时，浏览器无法判断文件类型，就会静默失败。

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

• 不要只写：<source src="video.mp4">
• 务必补全 type：<source src="video.mp4" type="video/mp4">
• 推荐同时提供 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 扩展版

本地视频播放失败，八成不是格式问题，而是协议和 MIME 类型这两关没过。别急着转码，先确认是否走了 http://，再检查 <source> 有没有带 type。