H.265 网页播放:WebAssembly + FFmpeg 实现浏览器端硬解/软解方案
背景与架构设计
为什么 <video src="video.h265.mp4"> 在 Chrome 里经常无法播放?核心原因在于 H.265 (HEVC) 的专利授权问题。目前只有 Safari (包括 iOS) 和 Edge (需硬件支持) 原生支持较好,Chrome 等主流浏览器默认未开启。
为了解决兼容性问题,我们需要构建一套混合解码方案:
- 优先硬解:如果浏览器支持 WebCodecs API(如 Chrome 94+),直接调用 GPU 进行硬件加速。
- 降级软解:如果不支持,自动切换到 WebAssembly 版的 FFmpeg 进行 CPU 软解,利用 SIMD 指令集提升效率。
解码流程架构
flowchart TD
A[视频流 H.265/HEVC] --> B{浏览器支持 WebCodecs?}
B -- Yes --> C[WebCodecs API VideoDecoder]
C --> D[GPU 解码 VideoFrame]
B -- No --> E[Wasm + FFmpeg 软解]
E --> F[CPU 解码 YUV420]
D --> G[Canvas WebGL 渲染]
F --> G
编译 FFmpeg 为 WebAssembly
这一步通常比较繁琐,需要使用 Emscripten 将 C 语言编写的 FFmpeg 编译成 .wasm 文件。为了性能,必须开启多线程和 SIMD 加速。
关键编译参数示例:
emcc \
-Llibavcodec -Llibavutil -Llibswscale \
-I. \
-o ffmpeg-decoder.js \
src/decoder.c \
-s WASM=1 \
-s USE_PTHREADS=1 \
-s PTHREAD_POOL_SIZE=4 \
-s SIMD=1 \
-s ALLOW_MEMORY_GROWTH=1 \
-O3
注意:src/decoder.c 是你需要编写的 C 语言胶水代码,用于暴露 avcodec_send_packet 和 avcodec_receive_frame 接口给 JS 调用。
核心实现:Web Worker 中的解码循环
解码是 CPU 密集型任务,绝对不能放在主线程,否则页面会卡死。我们需要在 Web Worker 中运行 Wasm。
初始化解码器
importScripts('ffmpeg-decoder.js');
let decoderModule;
let codecContext;
// 初始化 Wasm 模块
Module().then(module => {
decoderModule = module;
// 调用 C 导出的初始化函数
codecContext = decoderModule._init_h265_decoder();
postMessage({ type: 'ready' });
});
self.onmessage = () {
{ type, data } = e.;
(type === ) {
ptr = decoderModule.(data.);
decoderModule..(data, ptr);
ret = decoderModule.(codecContext, ptr, data.);
(ret === ) {
yuvData = ();
({ : , : yuvData }, [yuvData.]);
}
decoderModule.(ptr);
}
};


