如何用HTMLVideoElement播放来自ReadableStream的未知编码视频？

要解决这个问题，核心是动态提取视频流的编码信息，生成MediaSource可识别的完整MIME类型，再通过流式方式将数据喂给SourceBuffer，避免全量加载大文件导致的卡顿。以下是具体实现方案：

核心思路 #

MediaSource的SourceBuffer必须接收带编码信息的完整MIME类型（如video/mp4; codecs="avc1.4D401E,mp4a.40.2"），而视频文件的头部数据（前几KB）就包含编码信息。我们可以先读取流的一小段头部，解析出编码，再创建合法的SourceBuffer，最后流式处理整个流。

具体步骤 #

1. 从WebWorker接收ReadableStream #

确保WebWorker传递的流可在主线程消费，现代浏览器支持通过postMessage传递Transferable Streams：

// WebWorker中发送流
self.postMessage(stream, [stream]);

// 主线程接收
worker.addEventListener('message', async (e) => {
  const stream = e.data;
  // 后续处理逻辑
});

2. 解析流头部的编码信息 #

根据视频格式（MP4/WebM），从头部数据中提取编码标识：

解析MP4编码（简化版）

MP4的编码信息存放在moov盒子的子结构中，以下是简化的解析逻辑：

function getMP4Codecs(buffer) {
  let offset = 0;
  // 遍历所有盒子找moov
  while (offset < buffer.length) {
    const size = new DataView(buffer).getUint32(offset);
    const type = String.fromCharCode(...new Uint8Array(buffer.slice(offset+4, offset+8)));
    if (type === 'moov') {
      // 简化查找视频和音频编码（实际需解析avcC/esds盒子获取完整编码字符串）
      // 示例：H.264 + AAC的常见编码标识
      return 'avc1.4D401E,mp4a.40.2';
    }
    offset += size;
  }
  throw new Error('无法解析MP4编码信息');
}

解析WebM编码（简化版）

WebM的编码信息存放在EBML结构的Tracks元素中：

function getWebMCodecs(buffer) {
  const view = new DataView(buffer);
  let offset = 0;
  // 验证EBML头部标识
  if (view.getUint32(offset) !== 0x1A45DFA3) throw new Error('不是WebM格式');
  offset += 4;
  // 遍历找Tracks元素
  while (offset < buffer.length) {
    const id = view.getUint32(offset);
    const size = view.getUint32(offset+4);
    if (id === 0x1654AE6B) { // Tracks元素ID
      let trackOffset = offset + 8;
      while (trackOffset < offset + size) {
        const trackId = view.getUint32(trackOffset);
        const trackSize = view.getUint32(trackOffset+4);
        if (trackId === 0xAE) { // TrackEntry元素ID
          let codecOffset = trackOffset + 8;
          while (codecOffset < trackOffset + trackSize) {
            const codecId = view.getUint32(codecOffset);
            const codecSize = view.getUint32(codecOffset+4);
            if (codecId === 0x86) { // CodecID元素ID
              return new TextDecoder().decode(buffer.slice(codecOffset+8, codecOffset+8+codecSize));
            }
            codecOffset += codecSize + 8;
          }
        }
        trackOffset += trackSize + 8;
      }
    }
    offset += size + 8;
  }
  throw new Error('无法解析WebM编码信息');
}

注：生产环境建议使用更完善的解析逻辑，或引入轻量库（如mp4box.js的核心解析模块）处理所有边缘情况。

3. 创建MediaSource并流式播放 #

生成完整MIME类型后，绑定到video元素，流式写入数据：

async function playStream(stream, baseMimeType) {
  const reader = stream.getReader();
  // 读取头部数据
  const { done, value: headChunk } = await reader.read();
  if (done) throw new Error('流为空');

  // 生成完整MIME类型
  let fullMimeType;
  if (baseMimeType === 'video/mp4') {
    const codecs = getMP4Codecs(headChunk);
    fullMimeType = `${baseMimeType}; codecs="${codecs}"`;
  } else if (baseMimeType === 'video/webm') {
    const codecs = getWebMCodecs(headChunk);
    fullMimeType = `${baseMimeType}; codecs="${codecs}"`;
  } else {
    throw new Error('不支持的视频格式');
  }

  // 检查浏览器支持性
  if (!MediaSource.isTypeSupported(fullMimeType)) {
    throw new Error(`浏览器不支持${fullMimeType}`);
  }

  // 绑定MediaSource到video元素
  const mediaSource = new MediaSource();
  const video = document.getElementById('video-player');
  video.src = URL.createObjectURL(mediaSource);

  mediaSource.addEventListener('sourceopen', async () => {
    const sourceBuffer = mediaSource.addSourceBuffer(fullMimeType);
    
    // 写入头部数据
    sourceBuffer.appendBuffer(headChunk);

    // 循环写入剩余数据
    async function writeNext() {
      const { done, value } = await reader.read();
      if (done) {
        mediaSource.endOfStream();
        return;
      }
      // 等待SourceBuffer就绪
      if (sourceBuffer.updating) {
        await new Promise(resolve => sourceBuffer.addEventListener('updateend', resolve, { once: true }));
      }
      sourceBuffer.appendBuffer(value);
      writeNext();
    }

    writeNext();
  });
}

关键注意事项 #

• 必须等待sourceopen事件触发后再创建SourceBuffer，否则会报错。
• 写入数据时要监听updateend事件，避免在SourceBuffer更新状态时写入新数据。
• 解析编码信息时，头部数据的长度建议取10KB以上，确保包含完整的编码结构。
• 大文件流式处理不会占用过多内存，有效避免浏览器卡顿。

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