如何基于Blob URL实现HTML5视频的持续流式播放？

你遇到的问题其实很典型——直接用Blob URL或者拼接Blob的方式，本质都是在处理静态媒体资源，而流媒体需要的是动态、可追加的媒体流。YouTube这类平台用的核心技术是MediaSource API，这才是实现浏览器端流式播放的正确打开方式。

为什么之前的方法行不通？ #

• 直接用单个Blob URL：只能播放固定的一段数据，新生成的Blob没法自动追加进去
• 每次拼接所有Blob生成新URL：不仅性能极差（每次都要复制所有历史数据），而且内存会持续暴涨，最终耗尽资源，同时video元素也没法无缝切换到新的URL继续播放

用MediaSource API实现流式播放 #

MediaSource API允许你动态地向视频元素的媒体流中添加数据块，不需要重新创建URL，还能智能管理缓冲区，避免内存浪费。下面是完整的实现步骤：

1. 初始化MediaSource和Video元素 #

首先创建MediaSource实例，绑定到video元素，同时创建对应的SourceBuffer（用来接收数据块）：

const video = document.querySelector('video');
const mediaSource = new MediaSource();
video.src = URL.createObjectURL(mediaSource);

let sourceBuffer;

// 当MediaSource准备好时，创建SourceBuffer
mediaSource.addEventListener('sourceopen', () => {
  // 这里要注意匹配你的音视频编码格式，比如常见的mp4是'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
  // 格式必须和你生成的Blob编码一致，否则会报错
  const mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
  if (MediaSource.isTypeSupported(mimeCodec)) {
    sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
    // 设置模式为序列模式，确保数据按顺序添加
    sourceBuffer.mode = 'sequence';
  } else {
    console.error('不支持的媒体格式:', mimeCodec);
  }
});

2. 处理每秒生成的Blob数据 #

接下来，我们需要把每秒生成的Blob转换成Uint8Array（SourceBuffer只接受TypedArray类型的数据），然后在SourceBuffer的缓冲区有空位时添加进去：

const arrayOfBlobs = [];
let isBufferUpdating = false;

// 模拟每秒生成一个Blob数据块
setInterval(async () => {
  const nextChunk = await getNextVideoChunk(); // 替换成你的nextChunk()方法
  arrayOfBlobs.push(nextChunk);
  // 尝试添加数据到缓冲区
  appendChunkToBuffer();
}, 1000);

// 向SourceBuffer添加数据的核心函数
function appendChunkToBuffer() {
  // 如果缓冲区正在更新，或者没有可添加的数据，直接返回
  if (isBufferUpdating || !sourceBuffer || arrayOfBlobs.length === 0) return;

  isBufferUpdating = true;
  const chunk = arrayOfBlobs.shift(); // 取出最早的未处理数据块

  // 将Blob转换成Uint8Array
  const reader = new FileReader();
  reader.onload = () => {
    const uint8Array = new Uint8Array(reader.result);
    try {
      sourceBuffer.appendBuffer(uint8Array);
    } catch (e) {
      console.error('添加数据块失败:', e);
      // 如果缓冲区满了，把数据放回数组，稍后再试
      arrayOfBlobs.unshift(chunk);
      isBufferUpdating = false;
    }
  };
  reader.readAsArrayBuffer(chunk);
}

// 监听缓冲区更新完成事件，继续添加下一个数据块
sourceBuffer.addEventListener('updateend', () => {
  isBufferUpdating = false;
  appendChunkToBuffer();
});

// 监听缓冲区满的事件，暂停添加，等缓冲区有空间再继续
sourceBuffer.addEventListener('full', () => {
  isBufferUpdating = false;
});

3. 关键注意事项 #

• 编码格式匹配：SourceBuffer的mime类型必须和你的Blob数据编码完全一致，否则会无法添加数据。你可以用MediaSource.isTypeSupported()来检测浏览器是否支持该格式。
• 缓冲区管理：不要一次性添加过多数据，否则会导致内存占用过高。利用updateend和full事件来控制数据添加的节奏，让浏览器有足够的时间处理已缓冲的数据。
• 序列模式：设置sourceBuffer.mode = 'sequence'确保数据块按顺序播放，适合这种每秒生成固定时长数据的场景。

关于YouTube等平台的实现思路 #

YouTube这类平台确实用到了MediaSource API，但他们还结合了自适应比特率流媒体技术（比如HLS或DASH）：

• 服务器会把视频分成更小的切片（通常2-10秒）
• 客户端根据网络状况动态选择不同清晰度的切片
• 通过MediaSource API把选中的切片依次添加到视频流中
• 同时会预加载下几个切片，保证播放的流畅性

但核心的动态媒体流拼接逻辑，和上面的示例是一致的。

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