多余编解码器导致Media Source API不支持的原因及解决办法

架构老林

2026-7-3

问题原因

多余的提示轨codec：mp4box返回的tracks数组中包含了RTP提示轨（hint tracks），这些轨道的codec标记为rtp，它们是用于指导RTP传输的辅助轨道，并非实际的音视频编码格式。MediaSource API只识别真正的媒体编码codec，因此包含rtp的MIME类型会被判定为无效。
（次要）codec字符串大小写：标准中codec的profile部分推荐使用大写（如avc1.42E01E），但浏览器通常兼容小写，这不是导致本次无效的核心原因。

解决方法

只需在处理轨道时过滤掉非音视频类型的轨道，只保留type为video或audio的轨道即可：

const assetURL = "frag_bunny.mp4";

let mimeCodec = "";

const mp4boxfile = MP4Box.createFile();
mp4boxfile.onError = console.error;
mp4boxfile.onReady = (info) => {
  // 过滤出仅音视频轨道，排除提示轨
  const mediaTracks = info.tracks.filter(track => track.type === 'video' || track.type === 'audio');
  const codecList = mediaTracks.map(track => track.codec);
  
  // 拼接符合标准的MIME类型字符串
  mimeCodec = `video/mp4; codecs="${codecList.join(', ')}"`;
  
  // 验证结果
  console.log("生成的有效MIME类型：", mimeCodec);
  console.log("MediaSource是否支持：", MediaSource.isTypeSupported(mimeCodec));
};

fetch(assetURL).then((resp) => resp.arrayBuffer())
  .then((buf) => {
    buf.fileStart = 0;
    mp4boxfile.appendBuffer(buf);
    mp4boxfile.flush();
  });