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

Question

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

从 Fetch API (response.body) 获取 ReadableStream 很容易，但我找不到将其输入 video 元素的方法。我发现我需要一个blob URL，可以使用MediaSource 对象创建。但是，SourceBuffer#appendStream 方法听起来正是我们所需要的，但它并没有在 Chrome 中实现，所以我无法将流直接连接到 MediaSource 对象。

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

是否有其他方法可以为ReadableStream 创建 blob URL？或者有没有办法让fetch 和<video> 共享请求？有这么多新的 API，我很容易错过一些东西。

Answer 1

经过几个小时的试验，找到了一个半途而废的解决方案：

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 格式对此进行了测试，但我相信它应该也适用于其他格式只要您指定它。