HTML5 video 播放成败取决于浏览器对容器格式与内部编码组合的支持，而非单纯文件扩展名；最稳妥组合是 MP4 容器配 H.264+ACC，其次 WebM 配 VP9+Opus，AV1 支持仍有限。
HTML5 video 标签本身不直接“支持某种视频文件”，而是依赖浏览器内置解码器对封装格式 + 编码组合的识别能力。真正决定能否播放的，是视频容器（如 MP4）里装的是哪种视频编码（H.264 还是 H.265？）和音频编码（AAC 还是 Opus？）。只转成 .mp4 文件，不代表一定能播。
浏览器真正认的三种封装格式
所有主流现代浏览器（Chrome、Firefox、Safari、Edge）原生只解析以下三类容器：
- MP4：必须搭配 H.264 视频编码 + AAC 音频编码才稳定兼容；H.265/HEVC 虽可打包进 MP4，但仅 Safari 14+ 支持，Chrome/Firefox 默认禁用
- WebM：需 VP8 或 VP9 视频编码 + Vorbis 或 Opus 音频编码；Chrome/Firefox/Edge 原生支持良好，Safari 直到 16.4 才有限支持 VP9，且 macOS Ventura 及更新系统才可用
- Ogg：需 Theora 视频 + Vorbis 音频；Firefox 仍能播，Chrome 自 v120 起已停止解析 video/ogg MIME 类型，Safari 完全无视
AVI、FLV、RMVB、MOV（未重封装）、MKV 等格式，即使视频内容本身是 H.264，
关键编码组合与实际支持情况
不是“MP4 就行”，而是具体编码组合决定成败：
- H.264 + AAC（.mp4 容器）：目前最稳方案，覆盖 iOS、Android、Chrome、Firefox、Edge、Safari 全平台，推荐作为第一顺位 source
- VP9 + Opus（.webm 容器）：压缩效率高、开源免专利，Chrome/Firefox/Edge 播放流畅，但 Safari（包括 iOS）至今不支持 VP9 解码
- AV1（.mp4 或 .webm）：新一代高效编码，Firefox 90+、Chrome 90+、Edge 90+ 支持，Safari 16.4+ 仅限 macOS Ventura 及更新系统，且功能有限
注意：同一容器下换错编码（例如把 H.265 打包进 MP4 当作 H.264 用），浏览器大概率黑屏或报 VIDEO_ERROR_DECODE。
type 属性与 canPlayType() 的真实作用
type 属性不是可有可无的装饰，它告诉浏览器“这个 source 是什么类型”，帮助跳过明显不支持的格式，加快选择速度。写错会直接失效，例如：
✘ type="video/mpeg"（对应 .mpeg 文件，非 HTML5 支持格式）
✘ type="video/x-webm"（正确应为 video/webm）
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
canPlayType() 返回值只是浏览器的静态推测：
-
""：明确不支持，比如传 AV1 编码字符串给旧版 Chrome -
"probably"：编码组合匹配已知稳定支持项，如video/mp4; codecs="avc1.42E01E, mp4a.40.2" -
"maybe"：只写了video/mp4没带 codecs，浏览器无法确认是否真能解码
它不能代替真实加载测试——最终是否可播，得监听 canplay 或 loadedmetadata 事件。
确保播放成功的实操要点
光有格式不够，还要避开常见陷阱：
-
MP4 必须 faststart：moov box（元数据）若在文件末尾，Safari 和移动端会卡住、只出声无画面、首帧极慢；用 FFmpeg 修复：
ffmpeg -i input.mp4 -c copy -movflags +faststart output.mp4 -
移动端 autoplay 限制严格：iOS Safari 强制要求
playsinline+muted+ 用户手势触发，否则静音也不播，容易误判为格式问题 -
服务器 MIME 类型必须匹配：Nginx/Apache 需配置
.mp4 → video/mp4、.webm → video/webm，否则 Firefox 等可能跳过该 source -
永远用
多源 fallback ：不要只写src="xxx.mp4"；按优先级排列，让浏览器自动选第一个能解码的
一个稳妥结构示例：
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
