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

Question

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

ReadableStream从 Fetch API ( response.body)获取 a 很容易，但我找不到将它提供给video元素的方法。我发现我需要一个blobURL，它可以使用MediaSource对象创建。但是，该SourceBuffer#appendStream方法听起来正是所需要的，但并未在 Chrome 中实现，因此我无法将流直接连接到MediaSource对象。

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

是否有其他方法可以为 a 创建 blob URL ReadableStream？或者有没有办法提出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 格式对此进行了测试，但我相信它应该适用于其他格式以及只要您指定它。