合法type值仅限标准mime类型：video/mp4（h.264）、video/webm（vp8/vp9）、video/ogg（theora），必须与服务器content-type严格匹配，非标准写法如"mp4"或"video/x-m4v"会被浏览器直接跳过。
video 标签里 <source></source> 的 type 值有哪些合法取值
浏览器只认标准 MIME 类型，type 不是随便写个后缀就行。写错会导致该 <source></source> 被跳过——哪怕文件本身能播，浏览器也根本不会尝试加载它。
-
type="video/mp4"：对应 H.264 编码的 MP4 文件，兼容性最广（Chrome、Firefox、Safari、Edge 全支持） -
type="video/webm"：对应 VP8/VP9 编码的 WebM，Chrome 和 Firefox 原生支持好，Safari 从 14+ 开始支持，但部分旧版 iOS Safari 仍不支持 -
type="video/ogg"或type="video/ogv"：对应 Theora 编码的 Ogg 容器，Firefox 旧版本支持，现代浏览器基本弃用，不建议作为主力备选
注意：type 必须严格匹配服务器返回的实际 Content-Type。比如你写了 type="video/webm"，但服务器返回 Content-Type: application/octet-stream，浏览器照样忽略该源。
为什么 type 写错或缺失会导致视频不播放
浏览器按 <source></source> 出现顺序逐个检查 type 是否支持，不支持就跳过，不验证文件是否存在或能否解码。一旦所有 <source></source> 都被跳过，<video></video> 就变成空容器，连错误提示都不会触发。
- 漏写
type属性 → 浏览器无法判断是否支持，直接跳过该源 - 写成
type="mp4"或type=".mp4"→ 不是标准 MIME 类型，无效 - 写成
type="video/x-m4v"→ Safari 可能识别，但其他浏览器基本不认，属于非标准扩展，不推荐 - MP4 文件用了 HEVC（H.265）编码 → 即使
type="video/mp4"正确，Safari 以外多数浏览器仍无法播放，这不是type的问题，而是编码兼容性问题
如何验证 <source></source> 的 type 是否生效
打开开发者工具 → Network 标签页 → 播放视频 → 观察哪个 src 实际发起了请求。没发起请求的 <source></source>，基本就是 type 不被识别或不支持。
- Chrome/Firefox 支持在 Elements 面板里右键
<source></source>→ “Break on” → “attribute modifications”，可监控浏览器是否动态修改了它的状态 - 用
document.querySelector('video').canPlayType('video/webm')手动测试当前浏览器对某 type 的支持程度，返回"probably"或"maybe"才算有效 - 不要依赖文件后缀推断 type：一个
.mp4文件如果封装的是 AV1 编码，type="video/mp4"依然可能失败
构建工具（如 Webpack）里 <source src="..." type="..."></source> 路径失效的根源
html-loader 默认不处理 <source src></source> 和 <video src></video>，所以即使 type 写对了，路径写成 ./videos/demo.webm，构建后也会原样保留，导致 dist 目录下找不到文件，404。
- 必须显式配置 html-loader 的
sources.list，例如：{ tag: 'source', attribute: 'src', type: 'src' } - 同时确保
type对应的 MIME 类型已被 webpack 的 asset module 或 file-loader 处理（比如.webm后缀需在 rule 中覆盖） - 否则，
type再规范也没用——源文件压根没打进产物里
type 字符串本身没有歧义，但它的作用高度依赖底层资源是否可达、服务器是否返回正确 header、构建流程是否真正纳入该文件。三者缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
