10

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

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

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

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

4

1 回答 1

3

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

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

于 2021-08-13T21:34:33.917 回答