VSCode无法直接播放MP4，需通过HTML的video标签嵌入或安装Video Player等扩展预览；正确路径应相对HTML文件，推荐使用poster封面图和type属性，并避免file://协议。
直接双击打开 MP4 文件，VSCode 默认不支持
VSCode 本身不是媒体播放器，它不会像系统自带播放器那样直接播放 video.mp4。你双击一个 MP4 文件，VSCode 通常会弹出“无法预览二进制文件”或直接显示乱码——这不是 bug，是设计如此。
真正能“引入”的方式只有两种：一种是把它作为静态资源嵌入网页（HTML）中运行；另一种是靠第三方扩展在编辑器内临时渲染。前者才是 Web 开发中的标准做法，后者只是辅助预览，不能替代真实环境。
- 别试图用
file://协议在 Markdown 或 HTML 里硬写本地绝对路径，现代浏览器出于安全限制会直接拦截，控制台报错Not allowed to load local resource - 如果只是想快速看一眼视频内容，装个轻量扩展比如
Video Player就够了，它会在编辑器侧边开一个播放面板 - 但如果你正在写网页、做前端练习或交付项目，必须走 HTML +
<video>路线，否则换台电脑或部署到服务器就全失效
在 HTML 中正确嵌入 MP4：路径、格式与 poster
核心不是“怎么让 VSCode 认识 MP4”，而是“怎么写 HTML 让浏览器能加载并播出来”。关键在路径相对性、MIME 类型和 fallback 处理。
假设你的项目结构是：
my-project/
├── index.html
└── assets/
└── video.mp4
那么 index.html 里要这么写：
<video width="640" height="360" controls poster="assets/cover.jpg"> <source src="assets/video.mp4" type="video/mp4"> 您的浏览器不支持 video 标签。 </video>
-
src必须是相对于 HTML 文件的路径，不是相对于 VSCode 工作区根目录 -
poster是可选但强烈建议加的：它指定封面图，避免黑屏等待；图片也得放在同级或子目录下，路径规则一致 - 只写一个
<source>也能工作，但加上type="video/mp4"可让浏览器跳过探测，更快启动解码 - 别省略
controls属性——没有它，用户点不了播放，除非你额外写 JS 控制逻辑
用 Emmet 快速生成 video 结构，少打错一个空格
手敲 <video> 容易漏引号、错大小写或丢 </video>，VSCode 的 Emmet 支持一键展开，但对空格极其敏感。
在 HTML 文件中输入以下内容后按 Tab：
video[width="640"][height="360"][controls]>source[src="assets/video.mp4"][type="video/mp4"]+p{您的浏览器不支持 video 标签。}
- 所有属性括号紧贴标签名，
video[width="640"]✅；写成video [width="640"]❌（空格导致 Emmet 不识别） -
+表示同级插入下一个元素，这里接的是<p>替代文案 - 如果视频文件还没放到位，VSCode 会标黄警告，但不影响代码生成——先写结构，再补资源更顺
Markdown 里嵌视频？仅限在线链接或启用本地服务
VSCode 内置的 Markdown 预览器默认禁用本地视频加载，哪怕你写成 <video src="assets/demo.mp4"></video>，预览时也只会显示空白或报错。
- 唯一稳妥的在线方案：用 YouTube / Bilibili 等平台的 iframe 嵌入，例如
<iframe src="https://www.youtube.com/embed/xxx"></iframe> - 若坚持用本地 MP4，必须起一个本地 HTTP 服务（如 Python 的
python -m http.server），然后用http://localhost:8000/assets/video.mp4这类地址，才能绕过跨域限制 - 某些扩展（如
Markdown Preview Enhanced）声称支持本地视频，但实际依赖 Node.js 后端转发，配置复杂且不通用，不推荐新手踩坑
