基于HTML5实现MKV/AVI双音轨视频播放及音轨切换方案咨询

你提到的情况完全准确：Chrome确实内置了MKV格式的编解码支持，但原生HTML5 <video> API对MKV、AVI这类容器的多音轨管理能力非常有限——标准里并没有直接暴露切换音轨的接口，尤其是AVI，Chrome原生对其的支持本身就比较局限。下面是几个可行的实现方案，按复杂度和灵活性排序：

1. 基于FFmpeg.wasm的全功能方案（最推荐） #

这是目前最成熟且兼容性较好的方案，利用WebAssembly版本的FFmpeg来解析、转码视频文件，完全接管音轨选择和字幕处理：

• 核心思路：用FFmpeg.wasm加载本地或远程的MKV/AVI文件，先提取文件内的所有音轨、字幕轨道信息，展示给用户选择；然后根据用户选择，将对应音轨与视频流合并（或单独解码），输出为浏览器原生支持的格式（比如MP4+AAC），再通过MediaSource Extensions（MSE）喂给<video>元素；字幕则可以提取后转换为WebVTT格式，用<track>元素加载，或自定义渲染。
• 关键步骤示例：
  1. 加载FFmpeg.wasm库，读取视频文件；
  2. 执行命令获取文件的音轨、字幕元数据：

     const metadataOutput = await ffmpeg.run('-i', 'input.mkv', '-show_streams', '-print_format', 'json');
     const metadata = JSON.parse(metadataOutput[0]);
     // 解析metadata，筛选出所有音频轨道
     const audioTracks = metadata.streams.filter(stream => stream.codec_type === 'audio');
     

  3. 用户选择音轨后，执行转码命令合并视频与选中音轨：

     await ffmpeg.run('-i', 'input.mkv', '-map', '0:v:0', `-map`, `0:a:${selectedTrackIndex}`, '-c:v', 'copy', '-c:a', 'aac', 'output.mp4');
     

  4. 将转码后的文件通过MSE加载到<video>，同时处理字幕（比如提取ASS字幕转WebVTT）。

2. 基于WebCodecs API的底层控制方案 #

如果需要更精细的控制（比如低延迟播放），可以使用Chrome支持的WebCodecs API，结合MKV/AVI解析库实现：

• 核心思路：用JS库（比如mkv-parser）解析MKV容器，分离出视频流、各音轨的编码数据；然后用WebCodecs分别解码视频帧和选中的音频帧，将视频帧渲染到Canvas，音频帧通过AudioContext播放；字幕则解析后在Canvas上叠加渲染。
• 优势：完全绕过原生<video>的限制，自定义程度极高；
• 注意点：WebCodecs是较新的API，仅支持Chrome等现代浏览器，且需要自己处理帧同步、音视频同步等细节，开发复杂度较高。

3. 针对MKV的简化方案（仅MKV，不推荐AVI） #

如果只需要支持MKV，可以利用Chrome对MKV的原生支持，结合MSE的扩展能力：

• 核心思路：使用MKV解析库提取音轨的字节流，通过MSE将视频流和选中的音轨分别喂给<video>元素；不过这种方式需要确保音轨编码是Chrome原生支持的（比如AAC、Opus），且原生<video>的音轨切换需要通过隐藏的API或者自定义逻辑实现，稳定性较差，不推荐用于生产环境。

字幕显示的通用处理 #

不管用哪种方案，字幕都可以通过以下方式实现：

• 提取容器内的字幕轨道（比如SRT、ASS、VTT）；
• 如果是ASS等非WebVTT格式，用JS库转换为WebVTT，然后通过<video>的<track>元素加载，利用原生字幕渲染；
• 若需要自定义样式（比如彩色字幕、特效），可以解析字幕时间轴，在Canvas上实时渲染对应文本。

关键注意事项 #

• AVI兼容性：Chrome原生对AVI的支持非常有限，很多编码（比如Xvid、DivX）无法直接播放，因此必须通过FFmpeg.wasm转码为浏览器支持的格式；
• 性能优化：WebAssembly转码/解码会占用较多CPU，建议对大文件采用分块处理，或在转码时使用硬件加速（FFmpeg.wasm支持部分硬件加速）；
• 兼容性降级：对于不支持MSE/WebCodecs的浏览器，建议提示用户使用Chrome，或提供视频下载选项。

内容的提问来源于stack exchange，提问作者The Devman