使用 fetch() 获取 m2ts 数据时，应调用 response.arraybuffer() 方法将响应体解析为二进制缓冲区。拿到 arraybuffer 后，可以将其包装为 blob 对象并生成 url，直接赋值给 标签的 src 属性进行播放，或者通过 mediasource api 实现流式加载。m2ts 是 mpeg-2 transport stream 格式，浏览器原生支持有限，通常依赖 html5 视频元素的解码能力或外部库。
如何将 ArrayBuffer 转换为可播放的 Blob URL？
将 ArrayBuffer 转换为 Blob 并创建 Object URL 是最简单的本地播放方式。创建一个包含正确 MIME 类型的 Blob 实例，然后使用 URL.createObjectURL() 生成临时链接。这种方式适合小文件或需要快速预览的场景，但会将整个文件加载到内存中。
const fetchM2tsToBlob = async (url) => {
const response = await fetch(url);
if (!response.ok) throw new Error('Network response was not ok');
// 1. 获取二进制数据
const arrayBuffer = await response.arrayBuffer();
// 2. 创建 Blob，指定 MIME 类型
const blob = new Blob([arrayBuffer], { type: 'video/mp2t' });
// 3. 生成 URL
const videoUrl = URL.createObjectURL(blob);
return videoUrl;
};
// 使用示例
const src = await fetchM2tsToBlob('/path/to/video.m2ts');
document.getElementById('myVideo').src = src;
预期结果：
1. response.arrayBuffer() 返回一个 ArrayBuffer 对象。
2. new Blob([...]) 创建 Blob 对象，类型为 video/mp2t。
3. URL.createObjectURL() 返回一个以 blob: 开头的字符串 URL。
4. 视频元素开始加载该 URL。
如何使用 MediaSource API 处理流式 M2TS 数据？
对于大文件或实时流，使用 MediaSource API (MSA) 可以更高效地管理内存。通过 MediaSource 创建 SourceBuffer，并将 ArrayBuffer 分段追加到缓冲区。这种方法允许在数据下载过程中逐步解码，避免一次性加载整个文件到内存。
你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型
const setupMediaSource = async (url, videoElement) => {
const mediaSource = new MediaSource();
videoElement.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', async () => {
const sourceBuffer = await addSourceBuffer(mediaSource);
const response = await fetch(url);
const reader = response.body.getReader();
while (true) {
const { done, value } = await reader.read();
if (done) break;
// 将读取到的 chunk 追加到 SourceBuffer
try {
await sourceBuffer.appendBuffer(value.buffer);
} catch (e) {
console.error('Append failed', e);
break;
}
}
// 标记数据结束
mediaSource.endOfStream();
});
};
const addSourceBuffer = (mediaSource) => {
return new Promise((resolve, reject) => {
try {
// 注意：浏览器对 M2TS 的 MIME 类型支持可能不同
// 常见的是 'video/mp2t' 或 'application/mp4'
const sb = mediaSource.addSourceBuffer('video/mp2t');
resolve(sb);
} catch (e) {
reject(e);
}
});
};
预期结果：
1. MediaSource 初始化成功，触发 sourceopen 事件。
2. addSourceBuffer 成功添加 SourceBuffer，返回 Promise 解析后的 SourceBuffer 对象。
3. 循环读取响应流，每次 reader.read() 返回 ReadableStreamDefaultReadResult。
4. sourceBuffer.appendBuffer() 接受 ArrayBuffer，将数据送入解码器。
5. 所有数据追加完毕后，调用 mediaSource.endOfStream() 通知解码器。
M2TS 数据在 SourceBuffer 中追加失败的可能原因是什么？
当使用 MediaSource API 追加 M2TS 数据时，appendBuffer() 可能会抛出异常或静默失败。主要原因包括 MIME 类型不被浏览器支持、数据格式不符合规范、或缓冲区状态错误。M2TS 并非所有浏览器都原生支持作为 SourceBuffer 的输入，通常需要特定的编码配置（如 H.264 + AC-3）。
如果 addSourceBuffer 抛出 NotSupportedError，说明当前浏览器不支持该 MIME 类型。此时应尝试其他类型，如 'video/mp4' 或检查服务器返回的 Content-Type。如果 appendBuffer 抛出 InvalidStateError，可能是 SourceBuffer 正在清除或已移除。若抛出 QuotaExceededError，则表明缓冲区已满，需要等待旧数据被消费后再追加。在实际开发中，建议捕获这些错误并进行降级处理，例如回退到 blob: URL 方式或提示用户更新浏览器。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
