使用Media Source Extensions遇DOMException：转码后TS无法加载至MSE

我来帮你拆解下遇到的问题，一步步带你解决——用MSE加载从MP4直接拷贝编码生成的HLS流时，这是个很常见的坑。核心问题通常出在FFmpeg转换时的编码封装格式和MSE的SourceBuffer配置上，下面是具体的排查和修复步骤：

1. 先检查FFmpeg的转换命令：关键是H.264的封装格式转换 #

你用-c copy保留原编码是对的，但MP4里的H.264采用的是AVCC封装格式，而TS容器（HLS的分段文件）要求H.264必须是Annex B格式才能被MSE正确解析。直接拷贝编码的话，TS文件里的H.264还是AVCC格式，浏览器识别不了，就会报“找不到支持的源”。

修正后的FFmpeg命令 #

如果原MP4的视频是H.264、音频是AAC（这是最常见的组合），用这个命令转换：

ffmpeg -i input.mp4 -c:v copy -c:a copy -bsf:v h264_mp4toannexb -hls_time 10 -hls_list_size 0 output.m3u8

• -bsf:v h264_mp4toannexb：这个比特流过滤器会把MP4里的AVCC格式H.264转换成TS需要的Annex B格式，这是解决问题的核心。
• -hls_time 10：设置每个TS分段的时长为10秒（可按需调整）。
• -hls_list_size 0：生成完整的M3U8列表，不限制分段数量。

如果原MP4的编码不是H.264/AAC，比如是VP9/Opus，那需要确保浏览器支持对应的编码，并且调整过滤器（比如VP9的话不需要这个过滤器，但要确认MSE支持对应的MIME类型）。

2. 验证MSE的SourceBuffer MIME类型是否正确 #

MSE对SourceBuffer的MIME类型要求非常严格，必须和TS文件里的编码完全匹配。如果MIME类型不对，浏览器会直接拒绝加载。

步骤： #

1. 先用ffprobe查看TS文件的编码信息（需要安装ffmpeg套件）：

# 查看视频编码和profile
ffprobe -v error -select_streams v:0 -show_entries stream=codec_name,profile -of default=noprint_wrappers=1 your_segment.ts

# 查看音频编码
ffprobe -v error -select_streams a:0 -show_entries stream=codec_name -of default=noprint_wrappers=1 your_segment.ts

比如输出视频是codec_name=h264,profile=High，音频是codec_name=aac，对应的MIME类型应该是：

const mime = 'video/MP2T; codecs="avc1.64001F, mp4a.40.2"';

• avc1.64001F是H.264 High profile的codec标识（不同profile对应不同的十六进制值，比如Baseline是avc1.42E01E）。
• mp4a.40.2是AAC-LC的标准标识。

2. 在代码里先验证MIME类型是否被浏览器支持：

if (!MediaSource.isTypeSupported(mime)) {
  console.error('当前浏览器不支持该MIME类型');
  return;
}
// 再创建SourceBuffer
const sourceBuffer = mediaSource.addSourceBuffer(mime);

如果isTypeSupported返回false，那要么是编码不被浏览器支持，要么是MIME格式写错了。

3. 检查TS分段的加载和追加逻辑 #

即使前面都对，加载和追加的逻辑出错也会导致失败：

• 必须等待SourceBuffer完成更新再追加下一段：SourceBuffer在updating状态时不能调用appendBuffer，否则会报错。可以用异步逻辑处理：

async function appendTS(url) {
  const response = await fetch(url);
  const buffer = await response.arrayBuffer();
  
  // 等待当前更新完成
  while (sourceBuffer.updating) {
    await new Promise(resolve => {
      sourceBuffer.addEventListener('updateend', resolve, { once: true });
    });
  }
  
  sourceBuffer.appendBuffer(buffer);
}

• 按M3U8里的顺序加载分段：MSE需要按时间顺序拼接流，乱序加载会导致播放失败。
• CORS问题：如果TS文件是跨域的，服务器必须配置正确的CORS头（比如Access-Control-Allow-Origin），否则fetch获取的缓冲区无法被MSE使用。

4. 用浏览器调试工具排查 #

最后，用浏览器开发者工具确认：

• Network面板：查看TS文件的请求是否成功，响应头的Content-Type是否正确（通常是video/MP2T或application/octet-stream）。
• Media面板：查看视频的编码信息，确认和你设置的MIME类型一致。
• Console面板：查看是否有隐藏的错误（比如CORS错误、SourceBuffer的更新错误）。

按照这些步骤调整后，应该就能解决“找不到支持的源”的问题了。

内容的提问来源于stack exchange，提问作者Jack Pu