如何在HTML5中利用MediaRecorder的Start方法设置录制切片的时间间隔-H5教程-PHP中文网

mediarecorder.start()不支持直接按时间切片，需通过setinterval定时调用requestdata()实现；start()的timeslice参数仅作建议，现代浏览器大多忽略，真正分片必须主动触发。

如何在html5中利用mediarecorder的start方法设置录制切片的时间间隔

MediaRecorder.start() 本身不支持直接设置录制切片的时间间隔。它只负责启动录制，而“按时间切片”需通过 requestData() 主动触发分片，配合定时器（如 setInterval）实现。

理解 MediaRecorder 的分片机制

MediaRecorder 没有内置的“自动分片”参数。所谓“时间间隔切片”，本质是：在持续录制过程中，每隔指定毫秒数调用 recorder.requestData()，将当前已采集的媒体数据导出为一个 Blob 片段（即“切片”），同时清空内部缓冲、继续录制下一段。

关键点：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

start() 只接受一个可选参数 timeslice（单位：毫秒），但它仅作为 requestData() 的默认建议值，并不自动触发分片；浏览器是否按此执行取决于实现，且现代浏览器（Chrome/Firefox）大多忽略该参数。
真正可控的分片动作，必须由开发者主动调用 requestData()。
每次调用 requestData() 后，会触发 dataavailable 事件，拿到对应时间段的 Blob。

实现固定时间间隔切片的正确方式

以每 5 秒生成一个视频片段为例：

const recorder = new MediaRecorder(stream);
const chunks = [];

recorder.ondataavailable = event => {
  if (event.data.size > 0) {
    chunks.push(event.data);
  }
};

recorder.start(); // 启动录制（无需传 timeslice）

// 每 5000ms 主动请求一次分片
const intervalId = setInterval(() => {
  if (recorder.state === 'recording') {
    recorder.requestData();
  }
}, 5000);

// 停止时再 request 一次，确保末尾数据不丢失
function stopRecording() {
  clearInterval(intervalId);
  recorder.stop();
}

注意事项与常见问题

避免在非 recording 状态调用 requestData()：务必检查 recorder.state === 'recording'，否则会抛错。
首片时间可能略大于设定值：因为 setInterval 启动和首次 requestData 之间存在微小延迟，且 media 数据积累需要时间。
音频/视频同步不受影响：MediaRecorder 内部维护音画同步时间戳，每个 Blob 切片仍保持原始时序关系，拼接时需注意起始时间对齐（如用 MediaSource 动态追加）。
内存与性能：频繁调用 requestData()（如每 100ms）会产生大量小 Blob，增加 GC 压力；建议最小间隔不低于 1000ms，根据业务需求权衡。