Chrome：播放通过 fetch/XHR 下载的视频

我想要实现的是让 Chrome 将视频文件作为数据加载（通过 Fetch API、XHR 等）并使用<video>仍在下载文件时，无需对同一 URL 发出两个单独的请求，也无需等到文件完全下载。

很容易获得ReadableStream从获取 API (response.body），但我找不到一种方法将其输入video元素。我发现我需要一个blob可以使用以下命令创建此 URL：MediaSource目的。但是，那SourceBuffer#appendStream方法听起来正是需要的，但在 Chrome 中没有实现，所以我无法将流直接连接到MediaSource object.

我可能可以分块读取流，创建Uint8Arrays 出来，并使用SourceBuffer#appendBuffer，但这意味着除非块大小非常小，否则播放不会立即开始。而且感觉就像手动做一些所有这些 API 应该能够开箱即用的事情。如果没有其他解决方案，并且我这样做，我应该注意什么？

是否有其他方法可以为ReadableStream？或者有没有办法制作fetch and <video>分享一个请求？有太多新的 API，我很容易错过一些东西。

经过几个小时的实验，找到了一个半有效的解决方案：

const video = document.getElementById('audio');

const mediaSource = new MediaSource();

video.src = window.URL.createObjectURL(mediaSource);

mediaSource.addEventListener('sourceopen', async () => {

  const sourceBuffer = mediaSource.addSourceBuffer('audio/webm; codecs="opus"');

  const response = await fetch(audioSRC);

  const body = response.body

  const reader = body.getReader()

  let streamNotDone = true;

  while (streamNotDone) {

    const {value, done} = await reader.read();
    
    if (done) {streamNotDone = false; break;}
    
    await new Promise((resolve, reject) => {
      sourceBuffer.appendBuffer(value)

      sourceBuffer.onupdateend = (() => {
        resolve(true);
      })
    }) 

  }
});

它适用于https://developer.mozilla.org/en-US/docs/Web/API/MediaSource

另外，我仅使用 webm/opus 格式对此进行了测试，但我相信它也应该适用于其他格式只要你指定.