MediaRecorder API适配Safari、Chrome、Firefox的通用MIME类型选择

浏览器对某类视频格式的播放支持与MediaRecorder API对该格式的录制支持是完全独立的两套能力，不能直接等同。你观察到的Safari已支持播放webm内容，不代表它的MediaRecorder可以录制webm格式——截至2024年的所有Safari正式版本，MediaRecorder依然仅支持MP4容器的录制输出，未开放webm录制能力。

当前主流浏览器MediaRecorder编码支持现状 #

• Chrome（全版本支持MediaRecorder）：同时兼容webm系（vp8/vp9+opus）、MP4系（h264+aac）两类录制格式
• Firefox：<146版本仅支持webm系录制格式，从146版本开始新增了h264+aac编码的MP4格式录制支持
• Safari（≥14.1版本才支持MediaRecorder API）：仅支持h264+aac编码的MP4格式录制，无webm录制能力
• 额外提醒：你之前使用的video/mp4;codecs:h264存在MIME语法错误，正确写法为等号而非冒号，错误写法会直接导致浏览器判定为格式不支持

分场景选型方案 #

没有单一MIME格式可以同时覆盖所有历史版本的三款浏览器，需要根据业务场景选择适配策略：

• 场景1：可放弃对Firefox <146版本的兼容
  直接选用video/mp4;codecs=h264,aac作为默认MIME即可。该格式可在全版本Chrome、Safari、Firefox 146+上正常完成录制，且输出的文件无需转码即可在所有现代浏览器上直接播放，是综合体验最优的选项。
• 场景2：需要兼容所有历史版本的三款浏览器
  无法靠单一MIME实现全覆盖，必须在运行时通过MediaRecorder.isTypeSupported()方法做动态能力探测，按优先级选择第一个浏览器支持的MIME即可，候选优先级如下：
  1. 优先探测video/mp4;codecs=h264,aac，支持则直接选用，获得最优的跨浏览器播放兼容性
  2. 若不支持，降级选用video/webm;codecs=vp8,opus，兜底旧版Firefox、Chrome的使用场景。即使降级选用webm格式录制，输出的webm文件也可以在当前版本的Safari上正常播放，不会出现端到端的体验断层。

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