配了三年视频处理，今天才发现浏览器自己会编码了——WebCodecs 把这件事彻底变了

你还在用 FFmpeg.wasm 做浏览器端视频转码？小心你的 4K 素材把用户 CPU 跑满。

今天这件事彻底变了：Chrome/Edge 94+、Safari 16.4+、Firefox 130+ 全部原生支持 WebCodecs——一个让浏览器直接调用硬件视频编解码器的 API。不用 FFmpeg.wasm，不用 WebAssembly，不用等 WASM 加载。

一个 5 分钟 1080p30 H.264 转 AV1 的实测对比（来自 konvrt.dev 2026 年 4 月数据）：

• FFmpeg.wasm（libsvtav1 preset 8）：M2 MacBook Air 需要 14 分 20 秒
• WebCodecs（硬件 AV1 编码）：同样的机器只需要 58 秒
• WebCodecs（硬件 H.264 编码）：31 秒

AMD Ryzen 7 7840U 台式机的数据：FFmpeg.wasm 11 分 05 秒 vs WebCodecs 硬件 H.264 24 秒。差距稳定在 15-20 倍。

为什么 FFmpeg.wasm 这么慢？它跑在 WebAssembly 里，软件模拟编解码，没有硬件加速。4K 视频？单核 CPU 直接跑满，风扇狂转，进度条爬得像蜗牛。WebCodecs 把编码任务直接交给系统硬件——和你用剪映、用 Premiere 的时候是同一套底层。

那 WebCodecs 是什么？说白了就是四个类：VideoDecoder、VideoEncoder、AudioDecoder、AudioEncoder。你喂进去 EncodedVideoChunk，它吐出 VideoFrame；反过来也行。硬件加速，开箱即用。

const encoder = new VideoEncoder({
  output: (chunk, meta) => muxer.addVideoChunk(chunk, meta),
  error: (e) => console.error(e),
});
encoder.configure({
  codec: "av01.0.04M.08",  // AV1
  width: 1920,
  height: 1080,
  bitrate: 2_400_000,
  hardwareAcceleration: "prefer-hardware",
});

hardwareAcceleration: “prefer-hardware” 是关键——浏览器会优先用显卡编码，没有才回落到 CPU。

但 WebCodecs 有一个根本限制：它只管编码和解码，不管容器封装。它不认识 MP4、WebM、MOV。你需要 mp4box.js 拆 MP4，webm-muxer 拼 WebM，然后再套上 WebCodecs 的管线。完整转码流程：

文件 → mp4box.js（拆封） → VideoDecoder（硬件） → VideoFrame → VideoEncoder（硬件） → EncodedChunk → webm-muxer（封装） → 输出

音频走同一条管线，并行处理。

WebCodecs 什么时候不该用？需要精细编码控制的时候——FFmpeg 有几百个编码参数，WebCodecs 只暴露十几个。两次 pass VBR、CRF 靶向、b-frame 调优，这些都没有。你只能调 bitrate、latency mode 和几个 hints。

什么时候该用？一切需要硬件加速的视频处理：网页端视频编辑器、实时转码直播、浏览器内视频压缩、AI 生成视频的后处理。2026 年这个 API 已经 full cross-browser，没有理由再让用户等 FFmpeg.wasm 加载了。

下一步：如果你在做浏览器端视频处理，先去 MDN 查 WebCodecs 文档，配好 mp4box.js 或 webm-muxer，跑通第一条管线。你会发现——原来视频转码可以这么快。