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

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

不是“大部分格式都能转成 MP4 就行”，而是浏览器原生只认这三种封装（container）——MP4、WebM、Ogg。其他如 AVI、RMVB、MOV（未转封装）、FLV 等，哪怕用 FFmpeg 转了码，只要没套进这三类容器里，<video></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 插件桥接——现在基本可视为淘汰

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

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

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

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

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

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 保底。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！