本文详解为何直接双击 html 文件时嵌入的视频无法播放，并提供通过本地 http 服务器（如 python 内置服务器）正确加载本地视频资源的完整解决方案，附代码示例与关键注意事项。
本文详解为何直接双击 html 文件时嵌入的视频无法播放，并提供通过本地 http 服务器（如 python 内置服务器）正确加载本地视频资源的完整解决方案，附代码示例与关键注意事项。
在开发静态网页时，许多开发者会尝试直接用文件协议（file://）打开 HTML 页面来预览嵌入的视频——但此时浏览器（尤其是 Safari、Chrome 和 Edge）会严格阻止加载本地视频资源，并在控制台报出类似 Not allowed to load local resource 的安全错误。根本原因在于：现代浏览器出于安全策略，默认禁止通过 file:// 协议跨文件读取媒体资源（如 MP4、WebM），即使这些文件与 HTML 处于同一项目目录下。
要使视频正常播放，必须让页面通过 HTTP 协议（如 https://www.php.cn/link/b99c61acedb54c5253819b7b4f2d88c6）提供服务，而非本地文件系统协议。最轻量、无需额外安装的方案是使用 Python 自带的 HTTP 服务器模块。
✅ 快速启动本地服务器（推荐 Python 3）
确保你的项目根目录（即包含 index.html 和 media/ 文件夹的目录）已进入终端，执行：
python3 -m http.server 9000
该命令将在本地启动一个 HTTP 服务，监听端口 9000。随后，在浏览器中访问 https://www.php.cn/link/b99c61acedb54c5253819b7b4f2d88c6 即可加载页面（若主页面为 index.html，将自动渲染）。
✅ 修正 HTML 中的视频路径
原代码使用相对路径且未指定协议，导致被浏览器拦截：
<video width="320" height="240"> <source src="AH.mp4" type="video/mp4"> <source src="AH.webm" type="video/webm"> </video>
需改为绝对路径 + 本地服务地址，并确保路径与实际目录结构一致（例如视频存放在 media/AH.mp4）：
<video width="320" height="240" controls> <source src="https://www.php.cn/link/b99c61acedb54c5253819b7b4f2d88c6/media/AH.mp4" type="video/mp4"> <source src="https://www.php.cn/link/b99c61acedb54c5253819b7b4f2d88c6/media/AH.webm" type="video/webm"> 您的浏览器不支持 video 标签。 </video>
⚠️ 关键注意事项
- ✅ 始终添加 controls 属性以便调试播放控件；
- ✅ 确保 src 路径与服务器根目录下的实际文件位置完全匹配（建议统一小写命名，避免大小写敏感问题）；
- ✅ Safari 对 WebM 支持有限，生产环境建议优先使用 MP4（H.264 编码 + AAC 音频）；
- ❌ 不要使用 file:/// 路径或 ../ 相对路径在本地双击打开模式下调试视频；
- ? 若更换端口（如 8080），需同步更新所有 src 中的 URL。
? 进阶提示：对于长期开发，可考虑使用 VS Code 插件 Live Server，一键启动带热重载的本地服务；前端构建工具（如 Vite、Webpack Dev Server）也默认启用 HTTP 服务，天然规避此问题。
总结而言，这不是代码或编码格式错误，而是浏览器安全模型的必然约束。拥抱 HTTP 本地服务，是前端媒体开发的标准实践起点。
