Range header, video

First of all, don't ask me why I'm duing this thing, but I'm just curious if I can attain it.

I request a video from a server using the Range-header. The server sends me a buffer data of the video. In general I have about 3 request and then I have the full array of all three array buffers. Can I somehow concat them and then, converting the concatenation to a blob, create a url using URL.createObjectUrl to watch the video?

(In the following code, let's just assume we don't get fetch errors)

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;

Or am I thinking completely wrong? Then, how can I achieve the desired thing?

Blob instantiations allow for multiple ArrayBuffers to be concatenated: