适配前 FLV下载原文件 ↓
编码可用 ≠ 容器可播点击上方按钮，实测当前浏览器的处理结果
SOURCE / 原生浏览器等待实测，不预设浏览器结果。
FRONTEND / 工程案例 02
前端兼容适配
- 问题 · 编码可解，容器不兼容
- 浏览器支持 H.264 / AAC，却无法直接播放 FLV 容器中的这些数据。
- 解决 · 接入原生组件，回接播放
- JS 在 Worker 中调用 C++ / WebAssembly，将 FLV 重封装为 MP4，再交给 video 播放。
- 优势 · 保留画质，无需转换服务器
- 保留压缩数据，不重新编码；文件仅在浏览器内处理，纯静态网站也能运行。
调用链与数据流
- JavaScript
选择 FLV
读取本地文件
- Web Worker
调用 WebAssembly
C++ 编译后的浏览器组件
- C++ / 解封装
提取压缩样本
H.264 / AAC · DTS / PTS
parse() - C++ / 重封装
生成 MP4
样本表 · moov · mdat
remux() - 浏览器
播放 / 下载 MP4
Blob URL → video
编码受支持、容器受限时调整封装，不重新编码。用户文件在浏览器内实时处理；内置对照使用预生成样例。
适用范围与实现边界
独立兼容实验，非历史公司项目或 Chromium 内核修复。仅支持固定配置的 H.264 / AAC-LC FLV；编码不受支持时，重封装不能解决。用户文件通过 Worker 实时适配，内置样例为预生成输出；FFmpeg 仅用于素材生成与独立校验。
H.264 / AAC 00:08 · 合成测试源 · 默认静音
适配后 MP4下载适配结果 ↓
ADAPTED / 无损重封装封面为示意图 · 播放内容为合成测试信号
修复文件已备妥，点击验证开始播放。
视频编码 / 分辨率读取中容器和编码是两个维度
音频编码 / 采样率读取中原始 AAC 数据直接保留
压缩包一致性等待校验报告逐包 SHA-256，非文件哈希
帧重排处理DTS ≠ PTS保留 B 帧的解码 / 显示顺序
观察重点
先看原生浏览器如何处理 FLV，再看 MP4 是否播放。页面只报告当前环境的实际结果；封装适配不等于新增编解码能力。
用自己的 FLV 验证 浏览器内 WebAssembly · ≤ 16 MiB
仅支持 H.264 + AAC-LC、单路音视频、固定编码配置；不是通用转码工具。文件仅在浏览器 Worker 内处理，完成或失败后释放 Worker；静态托管也可使用，不需要 Python 服务。
实现、时间线与验证
ONE CASE. THREE PERSPECTIVES.媒体一致性校验
使用 ffprobe / FFmpeg 独立校验输出；重封装由 C++ 程序完成。
- 加载回归测试报告…
时间戳：解码顺序 ≠ 显示顺序
下面是 C++ 解析出的前 12 个视频包，单位 ms。B 帧导致 DTS / PTS 不同，不能简单丢弃合成时间偏移。
| 包 | DTS | PTS | 大小 / B | 关键帧 |
|---|
边界说明
本例使用项目中的 C++ 组件演示容器兼容适配，不是历史公司项目或 Chromium 内核修复。它不新增解码能力，也不处理任意格式、直播或商业 DRM；目标浏览器仍需支持 H.264 / AAC 解码。