MSE (Media Source Extensions) 实战：流媒体分块加载与自适应码率

引言

Media Source Extensions（MSE）是 W3C 规范中定义的一套浏览器 API，允许 JavaScript 动态构造媒体流并喂给 <video> / <audio> 元素，彻底改变了浏览器只能播放完整媒体文件的历史。本文围绕 MSE 的核心架构展开，通过实际代码演示分片加载、无缝拼接与自适应码率切换的完整流程，并对比不同实现策略的适用边界。测试环境为 Chrome 130、macOS 14.5，测试素材为 H.264 + AAC 编码的 1080p MP4（fragmented mp4）。

一、MSE 核心架构：SourceBuffer 与 MediaSource

MSE 的工作流程可以概括为三步：创建 MediaSource 实例 → 挂载到 <video> 元素 → 通过 SourceBuffer 追加二进制数据。其中每个环节都有严格的状态约束。

1.1 MediaSource 生命周期

MediaSource 对象有三个关键状态：closed、open、ended。只有在 open 状态下才能向 SourceBuffer 追加数据，一旦调用 endOfStream() 进入 ended，追加操作会抛出 InvalidStateError。

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

mediaSource.addEventListener('sourceopen', () => {
  // 此时才能创建 SourceBuffer
  const sourceBuffer = mediaSource.addSourceBuffer(
    'video/mp4; codecs="avc1.640028, mp4a.40.2"'
  );
  // ... 追加数据 ...
});

URL.createObjectURL 创建了一个指向 MediaSource 的 blob URL，这个 URL 只在当前页面生命周期内有效。需要注意，如果不调用 URL.revokeObjectURL，该 blob 会一直驻留内存。

1.2 MIME 类型与 codecs 参数

addSourceBuffer 的 MIME 类型参数决定了浏览器是否支持该编码格式。常见的组合如下：

编码格式	MIME 类型	codecs 示例	浏览器支持
H.264 + AAC	video/mp4	avc1.640028, mp4a.40.2	全平台
H.265/HEVC	video/mp4	hvc1.1.6.L93.90	Chrome 104+ (需硬件支持)
VP9 + Opus	video/webm	vp9, opus	Chrome/Firefox/Edge
AV1 + Opus	video/mp4	av01.0.05M.08, opus	Chrome 70+/Firefox 67+
VP8 + Vorbis	video/webm	vp8, vorbis	全平台

注意：MediaSource.isTypeSupported() 可以用来检测兼容性。但这个方法返回 true 只表示 MSE 层面支持该编码，不代表硬件能流畅解码。

function checkMSESupport(mimeCodec) {
  if (!window.MediaSource) {
    return { supported: false, reason: 'MediaSource API not available' };
  }
  return {
    supported: MediaSource.isTypeSupported(mimeCodec),
    codec: mimeCodec
  };
}

console.log(checkMSESupport('video/mp4; codecs="avc1.640028, mp4a.40.2"'));
// { supported: true, codec: 'video/mp4; codecs="avc1.640028, mp4a.40.2"' }

1.3 SourceBuffer 的模式：segments vs sequence

SourceBuffer 有两种追加模式（mode 属性）：

• segments 模式（默认）：每段数据带时间戳，SourceBuffer 按时间戳排序。适合 DVD 章节、广告插入等需要非线性排序的场景。
• sequence 模式：忽略数据段自带的 timestamp，由浏览器自动按追加顺序赋值。适合直播流、连续分段视频。

// 直播场景推荐 sequence 模式
sourceBuffer.mode = 'sequence';

两者的关键区别在于对 timestamp offset 的处理规则：segments 模式下需要手动管理 timestampOffset，否则可能出现重叠（overlap 错误）；sequence 模式则自动递增，对分段顺序有严格要求。

二、分片加载实战：从请求到渲染的全链路

2.1 分片策略设计

典型的 MSE 播放流程中，视频被切割为固定时长的片段（segment），每个片段是一个独立可解码的 fMP4（fragmented MP4）。分片大小直接影响首帧延迟和缓冲效率：

分片时长	首帧延迟	缓冲效率	适用场景	缺点
2 秒	极低（~500ms）	低（请求频繁）	超低延迟直播	网络开销大，服务器压力大
6 秒	低（~1.5s）	中	一般直播/点播	需要平衡 buffering
10 秒	中（~2.5s）	高	点播/录播	首帧略慢
15 秒+	较高	最高	长视频点播	切换码率响应慢

2.2 分段下载与追加

下面是一个完整的分片加载实现：

class MSESegmentLoader {
  constructor(videoElement, mimeCodec) {
    this.video = videoElement;
    this.mimeCodec = mimeCodec;
    this.mediaSource = new MediaSource();
    this.sourceBuffer = null;
    this.segments = [];
    this.currentIndex = 0;
    this.isAppending = false;
    this.pendingBuffers = [];

    this.video.src = URL.createObjectURL(this.mediaSource);
    this.mediaSource.addEventListener('sourceopen', () => this.onSourceOpen());
  }

  onSourceOpen() {
    this.sourceBuffer = this.mediaSource.addSourceBuffer(this.mimeCodec);
    this.sourceBuffer.mode = 'sequence';

    this.sourceBuffer.addEventListener('updateend', () => {
      this.isAppending = false;
      // 追加队列中的下一段
      if (this.pendingBuffers.length > 0) {
        this.appendNextInQueue();
      }
    });

    // 开始加载第一段
    this.loadSegment(0);
  }

  async loadSegment(index) {
    const response = await fetch(`/segments/segment_${index}.m4s`);
    const buffer = await response.arrayBuffer();

    if (this.isAppending) {
      // SourceBuffer 正在更新，加入队列
      this.pendingBuffers.push(buffer);
    } else {
      this.appendBuffer(buffer);
    }
  }

  appendBuffer(buffer) {
    try {
      this.isAppending = true;
      this.sourceBuffer.appendBuffer(buffer);
    } catch (e) {
      if (e.name === 'QuotaExceededError') {
        // 缓冲满，清理已播放部分
        this.evictBuffer();
        this.appendBuffer(buffer);
      } else {
        console.error('appendBuffer failed:', e);
      }
    }
  }

  appendNextInQueue() {
    const buffer = this.pendingBuffers.shift();
    if (buffer) {
      this.appendBuffer(buffer);
    }
  }

  evictBuffer() {
    // 清理当前播放位置之前 30 秒的数据
    const currentTime = this.video.currentTime;
    const removeStart = 0;
    const removeEnd = Math.max(0, currentTime - 30);

    if (removeEnd > removeStart) {
      this.sourceBuffer.remove(removeStart, removeEnd);
    }
  }

  endStream() {
    if (this.mediaSource.readyState === 'open') {
      this.mediaSource.endOfStream();
    }
  }
}

2.3 QuotaExceededError 处理

QuotaExceededError 是 MSE 开发中最高频的异常。浏览器为 SourceBuffer 分配的内存上限因平台而异（Chrome 桌面端约 150MB，移动端约 100MB）。当缓冲的未播放数据达到阈值时，appendBuffer 会抛出此错误。

最佳实践是监听 updateend 事件后检查 buffered 属性，主动调用 remove() 清理已播放的缓冲区：

sourceBuffer.addEventListener('updateend', () => {
  const buffered = sourceBuffer.buffered;
  if (buffered.length === 0) return;

  const currentTime = video.currentTime;
  const bufferedEnd = buffered.end(buffered.length - 1);

  // 缓冲区超过 60 秒时清理
  if (bufferedEnd - currentTime > 60) {
    const removeEnd = currentTime - 10;
    if (removeEnd > 0) {
      sourceBuffer.remove(0, removeEnd);
    }
  }
});

三、自适应码率（ABR）实现

3.1 ABR 决策逻辑

自适应码率（Adaptive Bitrate, ABR）的核心是根据当前网络状况和缓冲区状态，动态选择最合适码率的视频分片。关键指标有三个：

• 缓冲区长度（buffer length）：当前缓存了多少秒即将播放的数据
• 下载速率（throughput）：最近几段的平均下载速度
• 段下载耗时比（segment fetch ratio）：下载耗时 / 段时长，大于 1 表示网速跟不上

class ABRController {
  constructor(levels) {
    // levels: [{bitrate: 800000, resolution: '640x360'}, ...]
    this.levels = levels.sort((a, b) => a.bitrate - b.bitrate);
    this.currentLevel = 0;
    this.throughputSamples = []; // 最近 5 段的下载速度
  }

  recordSegment(bitrate, downloadTime, segmentDuration) {
    const throughput = (bitrate * segmentDuration) / downloadTime;
    this.throughputSamples.push(throughput);
    if (this.throughputSamples.length > 5) {
      this.throughputSamples.shift();
    }
  }

  getNextLevel(bufferLength) {
    const avgThroughput = this.throughputSamples.length > 0
      ? this.throughputSamples.reduce((a, b) => a + b, 0) / this.throughputSamples.length
      : Infinity;

    // 快速上切：缓冲充足 + 带宽远超当前码率
    if (bufferLength > 20 && avgThroughput > this.levels[this.currentLevel].bitrate * 1.5) {
      return Math.min(this.currentLevel + 1, this.levels.length - 1);
    }

    // 紧急下切：缓冲不足 + 带宽接近当前码率
    if (bufferLength < 5 || avgThroughput < this.levels[this.currentLevel].bitrate * 0.9) {
      const targetBitrate = avgThroughput * 0.8;
      for (let i = this.levels.length - 1; i >= 0; i--) {
        if (this.levels[i].bitrate <= targetBitrate) return i;
      }
      return 0;
    }

    // 保守下切：缓冲在下降
    if (bufferLength < 10 && this.currentLevel > 0) {
      return this.currentLevel - 1;
    }

    return this.currentLevel;
  }
}

3.2 无缝码率切换

切换码率时，需要在 updateend 事件中创建新的 SourceBuffer（不同码率使用不同的 SourceBuffer），新段追加后不会出现卡顿或黑屏。关键技巧是切换时机选择在段边界：

function switchQuality(mediaSource, oldBuffer, newMimeType, segmentData) {
  // 等当前追加完成后移除旧 SourceBuffer
  if (oldBuffer.updating) {
    oldBuffer.addEventListener('updateend', () => switchQuality(/* ... */), { once: true });
    return;
  }

  mediaSource.removeSourceBuffer(oldBuffer);

  const newBuffer = mediaSource.addSourceBuffer(newMimeType);
  newBuffer.mode = 'sequence';
  newBuffer.appendBuffer(segmentData);

  return newBuffer;
}

3.3 ABR 策略对比

策略	核心思想	优点	缺点
基于吞吐量（Throughput-based）	根据下载速度选码率	简单、响应快	容易因瞬时波动频繁切换
基于缓冲（Buffer-based）	根据缓冲区长度调码率	切换稳定、画质平滑	对网络突变响应慢
混合策略（Hybrid）	结合吞吐量 + 缓冲	兼顾响应与稳定	调参复杂，需要场景适配
BOLA（缓冲占用）	用 Lyapunov 函数优化体验	理论上有最优解	实现复杂，调试困难

在实际项目中，混合策略最为通用：以缓冲区长度为安全阈值（< 5s 强制降、> 20s 允许升），吞吐量作为升降幅度参考。BOLA 模型在 YouTube、Netflix 的学术研究中被验证有效，但中小团队更推荐从吞吐量策略起步。

四、MSE 的坑与限制

4.1 跨域问题

MSE 要求媒体分段必须支持 CORS，否则 fetch 请求会被浏览器拦截。服务端需要设置：

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, OPTIONS

同时在 fetch 中设置 { mode: 'cors' }。如果 CDN 不支持 CORS 且无法修改配置，MSE 方案就不可行。

4.2 fMP4 格式要求

MSE 要求 MP4 必须是 fragmented MP4（fMP4）。标准 MP4 的 moov atom 放在文件末尾，不支持分段解码。可以用 FFmpeg 转换：

# 将普通 MP4 转为 fragmented MP4
ffmpeg -i input.mp4 -c copy -movflags frag_keyframe+empty_moov output.mp4

# 切割为分片
ffmpeg -i input.mp4 -c copy -f segment -segment_time 6 \
  -segment_format mp4 -movflags frag_keyframe+empty_moov \
  segment_%03d.mp4

4.3 iOS Safari 的限制

iOS Safari 对 MSE 的支持一直滞后。虽然 iOS 13+ 在 iPadOS 上开启了 MSE，但 iPhone 上直到 iOS 17+ 才逐步完善。如果目标用户有较大比例的 iOS 设备，需要准备 HLS 降级方案：

if (MediaSource.isTypeSupported('video/mp4; codecs="avc1.640028, mp4a.40.2"')) {
  // 使用 MSE 播放
  initMSEPlayer();
} else {
  // 降级为 HLS
  video.src = '/master.m3u8';
}

4.4 内存与性能

SourceBuffer 的 appendBuffer 操作是异步的，但浏览器的媒体解码发生在独立线程。高码率（4K、HDR）下，如果连续追加多段数据而不等待 updateend，会导致解码队列堆积、内存飙升，甚至页面崩溃。务必维护追加队列，串行化 append 操作。

五、实战案例：6 秒分片 + 3 档码率的自适应播放器

以下是一个完整的播放器最小实现，包含分片加载、缓冲区管理、ABR 切换：

class AdaptivePlayer {
  constructor(videoEl, manifest) {
    this.video = videoEl;
    this.manifest = manifest; // { levels: [...], segments: [...] }
    this.mediaSource = new MediaSource();
    this.sourceBuffer = null;
    this.abrController = new ABRController(manifest.levels);
    this.segmentQueue = [];
    this.currentSegment = 0;

    this.video.src = URL.createObjectURL(this.mediaSource);
    this.mediaSource.addEventListener('sourceopen', () => this.init());
  }

  init() {
    const codec = this.manifest.levels[0].codec;
    this.sourceBuffer = this.mediaSource.addSourceBuffer(codec);
    this.sourceBuffer.mode = 'sequence';
    this.sourceBuffer.addEventListener('updateend', () => this.onUpdateEnd());

    // 预加载前 3 段
    for (let i = 0; i < 3; i++) {
      this.fetchSegment(i, 0);
    }
  }

  async fetchSegment(index, levelIndex) {
    const level = this.manifest.levels[levelIndex];
    const url = level.segments[index];
    const startTime = performance.now();

    const response = await fetch(url, { mode: 'cors' });
    const buffer = await response.arrayBuffer();

    const downloadTime = (performance.now() - startTime) / 1000;
    const segmentDuration = 6; // 每段 6 秒

    this.abrController.recordSegment(level.bitrate, downloadTime, segmentDuration);
    this.segmentQueue.push({ buffer, levelIndex });
    this.processQueue();
  }

  processQueue() {
    if (this.sourceBuffer.updating || this.segmentQueue.length === 0) return;

    const { buffer } = this.segmentQueue.shift();
    try {
      this.sourceBuffer.appendBuffer(buffer);
    } catch (e) {
      if (e.name === 'QuotaExceededError') {
        this.evictOldBuffer();
        this.segmentQueue.unshift({ buffer });
        this.processQueue();
      }
    }
  }

  onUpdateEnd() {
    this.processQueue();

    // 检查是否需要加载更多分段
    const buffered = this.sourceBuffer.buffered;
    if (buffered.length > 0) {
      const bufferedEnd = buffered.end(buffered.length - 1);
      const currentTime = this.video.currentTime;

      // 缓冲不足 15 秒时加载更多
      if (bufferedEnd - currentTime < 15 && this.currentSegment < this.manifest.totalSegments) {
        const nextLevel = this.abrController.getNextLevel(bufferedEnd - currentTime);
        this.fetchSegment(this.currentSegment++, nextLevel);
      }

      // 缓冲超过 60 秒时清理
      if (bufferedEnd - currentTime > 60) {
        this.evictOldBuffer();
      }
    }
  }

  evictOldBuffer() {
    const removeEnd = Math.max(0, this.video.currentTime - 10);
    if (this.sourceBuffer.buffered.length > 0 && removeEnd > 0) {
      this.sourceBuffer.remove(0, removeEnd);
    }
  }
}

六、常见问题（FAQ）

Q1：MSE 和 HLS（HTTP Live Streaming）有什么区别？

MSE 是浏览器底层 API，给了开发者完全的控制权（手动下载、手动追加、手动管理缓冲），灵活度最高，但开发量大。HLS 是 Apple 的流媒体协议，.m3u8 文件描述分段信息，safari 原生支持，Chrome 依赖 hls.js 等第三方库封装 MSE 实现。选择依据：如果只面向桌面 Chrome/Edge 用户，MSE 足够；如果需要多端兼容（尤其是 iOS），HLS + hls.js 更稳妥。

Q2：为什么 appendBuffer 会报 QuotaExceededError 但 buffered 不长？

常见原因是追加的 buffer 时间戳和现有缓冲区不连续，浏览器拒绝合并。检查分段的编码参数是否一致（分辨率、编码档次），以及 timestampOffset 是否正确设置。

Q3：fMP4 和普通 MP4 有什么区别？

普通 MP4 的 metadata（moov atom）通常放在文件末尾，必须完整下载才能解码。fMP4 的 moov atom 前置，并将媒体数据切割为 moof+mdat 对（fragment），每个 fragment 可独立解码，正是 MSE 需要的格式。

Q4：自适应码率切换时画面会闪烁吗？

在 MSE 中，只要切换发生在段边界（非关键帧），且新码率分段的编码参数与旧段兼容（同一编码格式、分辨率），就不会闪烁。如果分辨率也变了，浏览器会用新分辨率无缝接上。部分旧版浏览器不支持跨分辨率无缝切换。

Q5：MSE 支持 DRM 内容吗？

支持。MSE 与 Encrypted Media Extensions（EME）配合使用，可以实现加密流媒体的浏览器端解密播放。这也是 Netflix、Amazon Prime Video 等付费平台的技术基础。

总结

MSE 将媒体流的控制权从浏览器交给了开发者，让分片加载、自适应码率、实时直播等高级流媒体能力在浏览器中变为现实。它的灵活性伴随着复杂性------SourceBuffer 的状态管理、QuotaExceededError 处理、ABR 调参、跨平台兼容都是实践中绕不开的坑。建议在项目初期就确定好降级策略（HLS fallback），并根据目标设备选择合适的编码格式与分片策略。掌握 MSE 之后，你将不再被 <video src="..."> 的能力边界所限制，而是真正拥有一个可编程的媒体播放引擎。