17370845950

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. 基本使用步骤

要实现流媒体播放，按以下流程操作：

1. 创建 MediaSource 实例
2. 绑定到
3. 添加 SourceBuffer 并设置 MIME 类型
4. 分段写入二进制媒体数据（如通过fetch或WebSocket获取）
5. 持续追加数据实现“实时”播放

示例代码：

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视频流应用。只要后端输出符合规范的媒体片段，前端就能实现流畅的实时播放。