范围header，视频

Question

首先，不要问我为什么要做这件事，我只是好奇我能不能做到。

我使用 Range-header 从服务器请求视频。服务器向我发送视频的缓冲区数据。一般来说，我有大约 3 个请求，然后我有所有三个数组缓冲区的完整数组。我能否以某种方式连接它们，然后将连接转换为 blob，使用 URL.createObjectUrl 创建一个 url 来观看视频？

（在下面的代码中，假设我们没有获取到错误）

const getVideoBuffers = async (ranges, currentBuffers = [], i = 0) => {
  const res = await fetch("video", { headers: { Range: ranges[i] } });
  const buffer = await res.arrayBuffer();
  currentBuffers.push(buffer);
  i += 1;
  if (res.ok && res.status !== 206) return currentBuffers;
  return getVideoBuffers(ranges, currentBuffers, i);
}

const videoRanges = [...];
const buffers = await getVideoBuffers(videoRanges);
// Need this function
const concatedBuffers = concatBuffers(buffers);
const blob = new Blob([concatedBuffers], { type: "video/mp4" });
const url = URL.createObjectUrl(blob);
const video = document.createElement("video");
video.src = url;

还是我的想法完全错了？那么，怎样才能达到想要的效果呢？

Answer 1

Blob 实例化允许连接多个 ArrayBuffer：

new Blob([ ab1, ab2, ab3 ])

范围header，视频

Range header, video

javascript

http

video-streaming

html5-video

arraybuffer