直接写<video>标签在本地打不开是因为浏览器对file://协议的安全限制，导致跨源资源加载失败；解决方法是启动本地HTTP服务（如python -m http.server）或使用data URL内联小视频。
为什么直接写 <video> 标签在本地打不开文件
浏览器出于安全限制，本地（file:// 协议）加载视频时，多数现代浏览器（Chrome、Edge、Firefox）会拒绝执行跨源资源加载——哪怕视频就在同一文件夹里。典型表现是：<video> 元素显示为空白、控制栏灰掉、控制台报错 NotAllowedError: play() failed because the user didn't interact with the document first 或更底层的 Failed to load resource: net::ERR_FILE_NOT_FOUND（尤其当路径含中文或空格时）。
这不是代码写错了，而是协议层限制。解决思路只有两个：要么换协议（启动一个本地 HTTP 服务），要么绕过限制（仅限开发调试，且有兼容性代价）。
用 Python 快速起一个本地 HTTP 服务（推荐）
无需安装 Node.js 或额外工具，Python 自带 http.server 模块即可。确保你的 HTML 文件和视频文件在同一目录下（比如都放在 my-video-page/ 文件夹中），然后终端进入该目录执行：
python -m http.server 8000
之后访问 http://localhost:8000/index.html 即可正常播放。注意：<video> 的 src 要写相对路径，例如：
立即学习“前端免费学习笔记（深入）”；
<video controls><br> <source src="demo.mp4" type="video/mp4"><br></video>
常见坑：
-
demo.mp4文件名不能含中文或特殊符号（如我的视频.mp4→ 改成demo.mp4更稳妥） - Windows 用户若提示
python不是内部命令，请改用py -m http.server 8000 - 端口被占用时，换一个数字（如
8080）
不用服务、纯 HTML 的折中方案（仅限简单测试）
如果真不想启服务，可以尝试用 data: URL 内联小视频（仅适用于几 MB 以内的 MP4/WebM），或改用 Firefox 并手动开启宽松策略（不推荐长期使用）。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
内联示例（把视频 base64 编码后嵌入）：
<video controls><br> <source src="data:video/mp4;base64,AAAAIGZ0eXBtcDQyAAAAAG1kYXQY..." type="video/mp4"><br></video>
但实际中几乎没人这么做，因为：
- 编码后体积膨胀约 33%，10MB 视频变成 13MB+ HTML 文件
- 无法拖拽进度条（浏览器需先下载完整 data URL 才能 seek）
- Chrome 对 data URL 长度有限制（通常
2MB左右就截断）
Firefox 用户可临时在地址栏输入 about:config，搜索 security.fileuri.strict_origin_policy，双击设为 false —— 但这只是调试手段，每次更新 Firefox 后可能重置，且不解决跨域音频/字幕等后续问题。
<video> 标签必须加的属性和容易漏的细节
很多人只写 <video src="xxx.mp4"></video>，结果在某些设备上静音、无控件、甚至不自动加载。关键属性不是可选的：
-
controls：必须显式加上，否则用户无法操作（iOS Safari 尤其严格） -
preload="metadata"：建议加上，让浏览器只预加载时长、尺寸等元信息，避免一打开就拼命读整个视频文件 -
playsinline（iOS 必需）：否则 iPhone 上点播放会全屏跳转，加了才支持行内播放 -
poster属性值得配一张缩略图，不然视频加载前是一片黑或默认灰块
最小可用模板：
<video controls preload="metadata" playsinline poster="cover.jpg"><br> <source src="demo.mp4" type="video/mp4"><br></video>
最后提醒一句：本地测试阶段，别纠结“完全离线”。只要开个 python -m http.server，就已经是最轻量、最可靠、兼容性最好的方案。其他绕路方法，迟早会在加字幕、多分辨率、HTTPS 迁移时暴露问题。
