Safari中如何下载video/mp4类型文件而非application/octet-stream

你遇到的问题源于Safari的MediaRecorder在分片录制、MIME类型指定及文件拼接环节的特殊行为，以下是具体解决思路和方案：

核心问题分析 #

1. 分片录制导致文件结构不完整：调用mediaRecorder.start(1000)会让Safari输出多个MP4分片（fragmented MP4），直接拼接这些分片会丢失完整MP4所需的文件头信息，导致系统无法识别正确的MIME类型。
2. MIME类型指定不精确：直接使用video/mp4可能无法触发Safari的标准MP4容器录制，需要匹配具体的编码组合。
3. 文件名缺少后缀：下载时未指定.mp4后缀，影响系统对文件类型的识别。

解决步骤 #

1. 避免分片录制，获取完整媒体Blob #

去掉start()方法的时间间隔参数，让MediaRecorder仅在stop()时生成一个完整的媒体Blob：

// 原代码
mediaRecorder.start(1000);
// 修改为
mediaRecorder.start();

2. 精确检测Safari支持的MP4编码格式 #

Safari对MP4的支持需要匹配H.264视频+AAC音频的编码组合，先检测支持的带编码参数的MIME类型：

let videoMimeType;
if (MediaRecorder.isTypeSupported('video/mp4; codecs="avc1.42E01E, mp4a.40.2"')) {
  videoMimeType = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
} else if (MediaRecorder.isTypeSupported('video/mp4')) {
  videoMimeType = 'video/mp4';
} else {
  // 降级到Safari原生支持的QuickTime格式
  videoMimeType = 'video/quicktime';
}

3. 下载时指定完整文件名（带后缀） #

确保下载链接的download属性包含.mp4后缀，帮助系统识别文件类型：

a.download = "video.mp4";

4. （可选）使用File对象替代Blob #

将拼接后的Blob转为File对象，明确指定文件名和MIME类型，提升系统识别准确性：

const file = new File(blobs, "video.mp4", { type: videoMimeType });
const url = window.URL.createObjectURL(file);

完整修正代码 #

<html>
   <body>
      <button onclick="startRecording()">start</button><br>
      <button onclick="endRecording()">end</button>
      <video id="video" autoplay playsInline muted></video>
      <script>
         let blobs = [];
         let stream;
         let mediaRecorder;
         let videoMimeType;

         // 初始化时检测支持的MIME类型
         function initMimeType() {
             if (MediaRecorder.isTypeSupported('video/mp4; codecs="avc1.42E01E, mp4a.40.2"')) {
               videoMimeType = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
             } else if (MediaRecorder.isTypeSupported('video/mp4')) {
               videoMimeType = 'video/mp4';
             } else {
               videoMimeType = 'video/quicktime';
             }
         }

         async function startRecording()
         {
             initMimeType();
             stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
             mediaRecorder = new MediaRecorder(stream, {
               mimeType: videoMimeType,
             });
             mediaRecorder.ondataavailable = (event) => {
                if (event.data.size > 0)
                     blobs.push(event.data);
             }
             mediaRecorder.onstop = doPreview;
             // 不设置时间间隔，获取完整Blob
             mediaRecorder.start();
         }
         function endRecording()
         {
             mediaRecorder.stop();
             stream.getTracks().forEach(track => track.stop());
         }
         function doPreview()
         {
             if (!blobs.length)
                 return;
         
             // 转为File对象提升识别性
             const file = new File(blobs, "video.mp4", { type: videoMimeType });
             console.log(file.type);
             const a = document.createElement('a');
             document.body.appendChild(a);
             const url = window.URL.createObjectURL(file);
             a.href = url;
             a.download = "video.mp4";
             a.click();
             setTimeout(() => {
               document.body.removeChild(a);
               window.URL.revokeObjectURL(url); // 释放URL对象，避免内存泄漏
             }, 0);
         
             video.src = url;
         }
      </script>
   </body>
</html>

额外说明 #

如果修改后file --mime-type video.mp4仍返回application/octet-stream，说明Safari实际录制的是QuickTime格式，此时可将文件名改为video.mov，MIME类型设为video/quicktime，系统会正确识别为video/quicktime。若必须输出标准MP4，可使用前端视频处理库（如ffmpeg.wasm）对录制后的文件进行格式转换。

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