video标签原生仅支持MP4、WebM、Ogg三种封装格式，其他格式如AVI、FLV等即使转码也不被识别；且各格式对视频/音频编码有严格要求，需配合<source>多源回退并正确设置type属性。

video 标签只支持三种封装格式：MP4、WebM、Ogg

不是“大部分格式都能转成 MP4 就行”，而是浏览器原生只认这三种封装（container）——MP4、WebM、Ogg。其他如 AVI、RMVB、MOV（未转封装）、FLV 等，哪怕用 FFmpeg 转了码，只要没套进这三类容器里，<video> 标签直接忽略，连报错都不会有，静默失败。

关键点在于：格式 ≠ 编码。比如 MP4 文件必须用 H.264 视频编码 + AAC 音频编码；WebM 必须是 VP8 或 VP9 + Vorbis 或 Opus；Ogg 则需 Theora + Vorbis。用错编码组合（例如 H.265/HEVC 打包进 MP4），照样播不了。

Chrome/Firefox/Safari/Edge 的实际支持差异

别信“现代浏览器都支持 MP4”这种笼统说法。2026 年真实情况是：

• Chrome 和 Edge：优先走 WebM（VP9 + Opus），MP4 次之；对 Ogg 已基本弃用（v120+ 不再解析 video/ogg MIME）
• Firefox：仍完整支持 WebM 和 MP4，但拒绝播放含 DRM 的 MP4（即使有 encrypted-media API）
• Safari（macOS/iOS 17+）：只认 MP4，且要求必须含 avc1.64001f 或更高 profile 的 H.264，WebM 直接不显示控件，Ogg 完全无视
• 旧版 IE（IE11 及更早）：仅支持 MP4，且必须用 QuickTime 插件桥接——现在基本可视为淘汰

必须用 <source> 多源 fallback，不能只写 src

单写 src="video.mp4" 看似省事，但一碰到 Safari 用户用 Firefox 打开、或企业内网禁用 H.264 解码器的 Chrome，视频就黑屏无提示。正确做法是显式声明多个 <source>，让浏览器按顺序试加载：

立即学习“前端免费学习笔记（深入）”；

<video controls>
  <source src="video.webm" type="video/webm">
  <source src="video.mp4"  type="video/mp4">
  您的浏览器不支持该视频格式。
</video>

注意：type 属性必须写准，video/webm 不能写成 video/x-webm；服务器也要返回匹配的 Content-Type 响应头，否则部分浏览器（如 Firefox）会跳过该 <source>。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

MP4 播放只有声音没有画面？大概率是 moov box 位置错了

常见现象：MP4 在 Safari 或移动端加载极慢、首帧延迟高、甚至只出声无图——这不是编码问题，而是文件元数据（moov box）被塞在文件末尾。浏览器必须下载完整文件才能开始解码。

修复只需一行命令（需提前装 ffmpeg 或 qt-faststart）：

ffmpeg -i input.mp4 -c copy -movflags +faststart output.mp4

或者用老工具：

qt-faststart input.mp4 output.mp4

这个操作不重编码，秒级完成，但能决定用户是“秒开”还是“等十秒才动”。很多自动化转码流程会漏掉这步，上线后才发现兼容性崩了。

真正麻烦的是那些嵌入式设备或老旧 CMS 导出的 MP4，它们默认不带 faststart，且无法二次处理——这时候只能换 WebM 保底。