WebM 详解：MP4 之外，专为网页而生的开源视频格式-马育民老师

# 介绍

**WebM** 是 **Google 在2010年发布、专为网页设计的开源免版税多媒体容器格式**，文件后缀 `.webm`，MIME类型：`video/webm`（视频）、`audio/webm`（纯音频）。
> 容器≠编码：WebM是封装外壳，内部固定搭配开源音视频编码，基于Matroska(MKV)做精简子集，去掉MKV很多复杂功能，只保留网络播放必需能力。

### 一句话理解

专为网页打造的 **开源免专利 视频格式**，用来弥补 MP4 专利、体积、透明视频方面的短板。

# 有MP4，为什么还要搞WebM？

MP4只是**封装容器**，互联网上绝大多数MP4里面装的是 **H.264视频 + AAC音频**。
MP4本身格式开放，但 **H.264/H.265是专利编码**，这就是WebM诞生最核心的根源。

### 1. 专利费用，是最大导火索

H.264由MPEG‑LA专利池管理：如果你的网站对外提供视频服务，规模大了是要交专利费的。哪怕 **你只是把视频转成H.264，没有卖视频，分发量大也会涉及专利授权**。

Google当年做YouTube，海量视频流量，如果全部用H.264，**每年要付巨额专利许可费**。

- **WebM(VP8/VP9/AV1)：完全免专利、免费商用**，没有专利池收钱。
- MP4+H.264：格式免费，但里面的视频编码有专利枷锁。

**提示：**MP4外壳本身不收费，但里面装的H.264编码是收费的，很多人混淆这点。

### 2. 压缩效率：同等画质体积更小

- VP9对比H.264：同样清晰度，**体积小30%‑50%**。
YouTube很早就把大部分视频切到VP9‑WebM，同样清晰度，用户下载流量更少，Google服务器带宽成本直接下降。

- AV1更进一步，比VP9还省20‑30%。

MP4也可以封装AV1，但生态上AV1优先绑定WebM。

## 3. MP4做不到：Alpha透明通道

普通MP4（H.264/H.265）**完全不支持透明背景**。
VP9编码的WebM支持Alpha通道，可以做透明短视频，用来网页动画、悬浮动效。

对比GIF：

- GIF：画质差、色彩少、体积爆炸。
- WebM透明视频：高清、真彩色、体积小很多。

> MP4‑HEVC其实理论上支持alpha，但几乎没有浏览器支持，完全没法网页用。

### 4. Web实时通信WebRTC刚需

浏览器之间直播、视频通话（网页版会议）：

- WebRTC原生只支持VP8/VP9/AV1+Opus，输出WebM。
- **浏览器不能原生输出H.264 MP4流**，MP4不适合低延迟实时流。
MP4设计偏向本地文件、点播，不是为实时通话设计。

Opus音频也很强：低码率下人声比AAC更好，延迟极低，适合通话。

### 5. 流式分片、网页原生优化

WebM基于MKV子集，天生适合分片DASH流媒体，适合边下边播。
MP4也支持流媒体，但早期MP4的moov元数据放在文件末尾，如果没做优化，网络差的时候播放器要等下载完头部才能播放。

---

### 类比

- MP4 = 通用充电宝，所有手机都能用，但是要交专利许可费。
- WebM = 专为网页设计的快充充电宝，免费无专利，充电更快，但是部分老苹果手机不兼容。

# 一、支持的编解码器

WebM不允许随便塞入编码，标准限定：
### 视频编码

1. **VP8**：初代，2010，对标H.264，压缩一般，现在基本淘汰
2. **VP9**：主力编码，2013，同画质相比H.264体积减少30‑50%，对标H.265，**YouTube大量使用**，支持 **Alpha透明通道**，可以做透明背景视频（替代GIF），支持4K/HDR
3. **AV1**：新一代，AOM联盟开发，WebM2.0支持；比VP9再省20‑30%码率，免专利；缺点：编码速度慢，需要新硬件硬解支持

### 音频编码
1. **Vorbis**：早期音频，已逐步被Opus替代
2. **Opus**：现代首选，低码率语音效果好、延迟极低，适合直播、WebRTC通话，6kbps即可听清人声

### 注意

WebM**不能放H.264/H.265/AAC**，这是格式规范限制。

# 二、核心特性

✅ **完全开源、免专利费**：商用不需要交专利授权费，规避H.264/H.265专利风险，网站、SaaS服务很友好
✅ **网页深度优化**：支持DASH自适应流媒体、低延迟，适合HTML5 `<video>`标签，支持分片流式播放
✅ **支持透明Alpha通道**：VP9‑WebM可以输出透明背景视频，用来做网页动效，体积远小于GIF动图
✅ **支持4K、8K、HDR、高帧率**
✅ **支持纯音频webm**：只封装Opus音频，后缀依然`.webm`

### ❌ **缺点**

1. Apple生态历史支持差：Safari从macOS11.3 / iOS15才原生支持WebM，老苹果设备无法播放；硬件解码效率不如MP4/H.264
2. 部分本地播放器、剪辑软件支持弱；老旧嵌入式设备不支持
3. AV1编码速度慢，老机器编码压力大
4. 不支持H.264/H.265/AAC编码

# 三、浏览器&平台兼容性

- Chrome / Edge(Chromium) / Firefox / Opera：**完整原生支持VP8/VP9/AV1**，Android全版本支持WebM
- Safari：macOS ≥11.3、iOS ≥15才原生支持WebM；旧版Safari完全无法播放

# 四、典型使用场景
1. **网页短视频、banner背景视频**：webm体积小，网页加载更快，降低带宽消耗
2. **YouTube**、维基百科：大量使用VP9‑WebM分发视频流
3. WebRTC音视频通话：浏览器实时音视频默认输出WebM(VP8/VP9+Opus)
4. 透明动效素材：网页透明短视频，替代GIF（GIF体积巨大）
5. 录屏软件：很多网页录屏直接输出webm
6. 开源项目、免费站点，规避视频专利授权问题

# 五、WebM vs MP4 对比
|项目|WebM|MP4|
|---|---|---|
|容器基础|Matroska子集|MPEG‑4 Part14|
|内部编码|VP8/VP9/AV1 + Vorbis/Opus|H.264/H.265 + AAC|
|专利|**完全免版税**|**需要专利授权（商用）**|
|压缩效率|VP9优于H.264；AV1更强|H.264兼容性好，H.265压缩强|
|透明通道|✅ VP9支持|❌不支持|
|兼容性|Chrome/Firefox好；老Safari差|全设备最强，手机、播放器通用|
|适合场景|网页端、流媒体、WebRTC|通用视频、移动端、离线播放|

误区：**后缀MP4/WebM只是外壳，真正决定画质体积的是内部编码**。

# 六、工具：编码、播放、转换
### 播放
- 浏览器（现代Chrome/Firefox/Edge）、VLC播放器、MPV
- Windows自带播放器旧版本不支持，需要安装扩展

### 转码（FFmpeg最常用）
```bash
# mp4转VP9 webm
ffmpeg -i input.mp4 -c:v libvpx-vp9 -c:a libopus output.webm

# 输出透明webm（输入带alpha）
ffmpeg -i transparent.mov -c:v libvpx-vp9 -pix_fmt yuva420p output_alpha.webm
```

### 压缩提示
- VP9编码很慢，网页素材优先用`libvpx‑vp9`；追求更快编码可以选VP8，但画质体积较差。
- AV1编码速度极慢，适合离线预转码，不适合实时生成。

# 七、播放中长视频

### 1、播放中长webm的问题
1. **快进（seek）性能差**
WebM的时间索引叫`Cues`，很多ffmpeg/录屏导出的webm**缺少Cues索引**。

- 没有索引：你拖动进度条跳到20分钟，浏览器**必须从文件开头读到20分钟位置**才能播放，转圈卡顿，体验极差。

2. 网络差体验差：一次性加载整个大文件，**不能动态切清晰度**，网速慢只能卡，不能自动降码率。

3. 兼容性老问题：Safari(iOS15以下)直接无法播放WebM。

### 2、webm长视频方案（YouTube）

WebM中长视频必须上 **DASH(MPEG‑DASH)，`.mpd`清单 + WebM分片**

- HLS(m3u8)协议 **不能用WebM容器分片**；苹果设备访问时，要另外输出一套HLS(fMP4+H.265/m3u8)作为兜底。

### YouTube 做法

- PC/安卓走DASH+WebM分片；
- Safari苹果设备自动切HLS(m3u8)+fMP4(H.265)

两套完全不同的分片资源。

# 八、国内主流视频网站技术总结

**国内几乎不用WebM分片**，主流是 **HLS(m3u8) + fMP4 / TS分片**；B站网页端用DASH，但分片容器是**fMP4(m4s)，不是WebM**。
> 编码可以用H.264/H.265/AV1，但外壳容器不用WebM。

### B站哔哩哔哩
- **网页端：MPEG‑DASH（`.mpd`清单），分片是 fMP4（`.m4s`）**，**不是WebM**
- 编码：H.264(AVC) / H.265(HEVC) / **AV1**（开源免专利）三档可选
- iOS/Safari浏览器：降级走HLS m3u8
- APP客户端：DASH/m3u8都有，DRM加密

**重点：**虽然用AV1编码，但**封装进fMP4分片，不是WebM容器**。YouTube是DASH+WebM分片；B站DASH+fMP4分片，这是两者关键区别。

### 爱奇艺 / 腾讯视频 / 优酷
- **主协议：HLS m3u8（TS分片 / fMP4分片）**，苹果、安卓、小程序全平台原生兼容
- 编码优先：**H.265(HEVC)**，4K会员用H.265；向下兼容H.264；AV1少量试点
- 网页端靠自研播放器做MSE播放；APP原生HLS；版权视频全部DRM加密

**完全不使用WebM**

### 抖音 / 快手（短视频）
- 短视频：很多直接返回完整MP4静态文件，不用分片协议
- 长视频/剧集：HLS m3u8
- 编码H.265为主；无WebM

### 直播场景

- B站、抖音、快手：网页端大量用 **HTTP‑FLV（flv.js）**，延迟1‑3秒；APP端HLS m3u8
- 几乎不用DASH，更不用WebM分片直播。

### 为什么国内不用WebM？
1. **iOS/Safari历史兼容坑**
国内大量苹果手机用户；HLS(m3u8)是Safari原生支持；WebM分片HLS标准不支持，DASH+WebM在旧Safari还要JS播放器，体验差。

2. **终端设备太杂**
电视盒子、国产嵌入式设备、老安卓、国产浏览器，WebM/VP9硬件解码支持参差不齐；MP4(fMP4)+H.264/H.265硬件解码遍地都是。

3. **AV1编码可以塞进fMP4**
AV1是编码，WebM是容器；**AV1完全可以封装到fMP4分片里面跑DASH**，不需要WebM外壳。B站就是这么做的，拿到AV1的压缩收益，又保留MP4容器的兼容性。

4. **CDN、转码、DRM版权生态成熟度**
国内CDN、转码系统、视频加密DRM对fMP4/TS/HLS支持最完善；WebM分片的DRM、转码链路国内落地少。

# 九、总结

MP4胜在**兼容性无敌**；WebM胜在**免专利、压缩好、支持透明、适合网页实时音视频**。
MP4解决“在哪都能打开”，WebM解决“服务器省钱、网页体验更好”。

原文出处：/show_1GW3ta23ANTV.html