MediaSource API 可实现实时流媒体播放，通过 JavaScript 将视频片段动态推送到 元素。核心步骤包括创建 MediaSource 实例、绑定视频元素、添加 SourceBuffer 并分段写入数据，支持 WebSocket 接收 fMP4 流，适用于低延迟|直播|等场景。
用于低延迟|直播|等场景。要在HTML中实时播放流媒体内容，可以使用 MediaSource Extensions (MSE) API。它允许JavaScript动态地将音视频数据喂给HTML5的 元素，从而实现自定义的流媒体播放，比如HLS低延迟播放、DASH流或从WebSocket接收视频流。
1. 什么是MediaSource API？
MediaSource API 是W3C标准的一部分，它提供了一种方式，让开发者可以通过JavaScript向标签“推送”媒体数据块（如视频片段），而不是依赖完整的文件或传统流协议（如RTMP）。
核心对象包括：
-
MediaSource：连接到
的桥梁 - SourceBuffer：实际存储和管理媒体片段（如mp4片段）的对象
2. 基本使用步骤
要实现流媒体播放，按以下流程操作：
- 创建 MediaSource 实例
- 绑定到
- 添加 SourceBuffer 并设置 MIME 类型
- 分段写入二进制媒体数据（如通过fetch或WebSocket获取）
- 持续追加数据实现“实时”播放
示例代码：
const video = document.querySelector('video');
const mediaSource = new MediaSource();
// 绑定 MediaSource 到 video
video.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', () => {
// 创建 SourceBuffer，假设是fragmented MP4
const sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E"');
// 模拟加载一段视频片段
fetch('/video-segment-1.mp4')
.then(response => response.arrayBuffer())
.then(data => {
sourceBuffer.appendBuffer(data); // 写入数据
});
// 后续可继续 appendBuffer 更多片段
});
3. 实时流场景：WebSocket 推送视频流
在|直播|或低延迟场景中，服务端可通过 WebSocket 持续发送视频片段（通常是fMP4格式），前端用 MediaSource 接收并播放。
实现要点：
- 后端需生成符合 MSE 要求的fragmented MP4（fMP4）片段
- 前端通过 WebSocket 监听数据包，并调用
sourceBuffer.appendBuffer() - 注意处理缓冲区更新、错误和时间戳对齐
简单示例：
const ws = new WebSocket('ws://your-stream-server');
const mediaSource = new MediaSource();
video.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', () => {
const sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E"');
ws.onmessage = (event) => {
const chunk = event.data; // ArrayBuffer 格式的视频片段
if (!sourceBuffer.updating) {
sourceBuffer.appendBuffer(chunk);
}
};
});
4. 注意事项与限制
使用 MediaSource API 需要注意以下几点：
- 浏览器支持：Chrome、Edge、Firefox 支持良好；Safari 支持有限（尤其是fMP4）
-
MIME类型必须准确：需匹配实际编码格式（可用
MediaSource.isTypeSupported()检测） - 视频格式要求：必须是支持流式追加的格式，如 fMP4、WebM，不能是普通MP4
- 跨域问题：确保视频数据接口允许跨域请求
-
内存管理：长时间播放应定期调用
sourceBuffer.remove()清理旧数据
检测是否支持：
if ('MediaSource' in window) {
console.log('支持 MediaSource API');
} else {
console.log('不支持');
}
基本上就这些。MediaSource API 为前端实现灵活的流媒体播放提供了强大能力，适合开发自定义播放器、低延迟|直播|或P2P视频流应用。只要后端输出符合规范的媒体片段，前端就能实现流畅的实时播放。
