Question

我想要实现的目标是让Chrome将视频文件作为数据加载（通过Fetch API，XHR等）并使用<video>进行播放，同时它仍然存在下载时不会对同一个URL发出两个单独的请求，也不会等到文件完全下载完毕。

从Fetch API（ReadableStream）轻松获取response.body，但我无法找到将其提供给video元素的方法。我已经发现我需要一个blob网址，可以使用MediaSource对象创建。但是，SourceBuffer#appendStream方法听起来就像是需要的，并没有在Chrome中实现，因此我无法将流直接连接到MediaSource对象。

我可以读取块中的流，从中创建Uint8Array，并使用SourceBuffer#appendBuffer，但这意味着除非块大小非常小，否则不会立即开始播放。此外，感觉就像手动执行所有这些API应该能够开箱即用的东西。如果没有其他解决方案，我这样做，我应该注意什么警告？

是否有其他方法可以为ReadableStream创建blob网址？或者有没有办法让fetch和<video>分享请求？有很多新的API我很容易错过。

Answer 1

尝试一下：

(async function(){
  const res = await fetch('http://xxxx.mp4')
  const blob = await res.blob()
  const src = window.URL.createObjectURL(blob)
  const el = document.getElementById('video')
  el.src = src
  el.play()
})()

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

1 个答案: