MediaSource视频流

Question

我正在使用JavaScript代码创建MediaSource扩展对象以流式传输mp4视频，该视频可以正常运行，但是从头到尾都可以流式传输，如果用户将其定位到非缓冲位置，则即使当前时间块已加载。

我的视频流看起来像：

CHUNK [0]

CHUNK [1]

CHUNK [2]

CHUNK [3]

我需要获得正确的字节范围[bytes = start-end]来加载块，这是指视频当前时间

我使用的代码

var
  duration    = 360.373696,
  filesize    = parseInt(await (await fetch("stream.mp4", {method: "HEAD"})).headers.get("content-length")),
  chunks      = Math.ceil(duration / 10),
  chunkSize   = Math.floor(filesize / chunks);
  codecs      = `video/mp4; codecs="avc1.4D401F, mp4a.40.2"`,
  video       = document.querySelector("video"),
  mediaSource = new MediaSource(),
  bufs = [];
mediaSource.addEventListener("sourceopen", async function () {
  mediaSource.duration = duration;
  var sourceBuffer = mediaSource.addSourceBuffer(codecs);
  for (let i = 0; i < chunks; i++) {
    var start = (i == 0) ? 0 : (chunkSize*i)+i;
    var end   = (i == chunks - 1) ? "" : start + chunkSize;
    var req   = await fetch("stream.mp4", {
      headers: {
        range: `bytes=${start}-${end}`
      }
    });
    var buf = await req.arrayBuffer();
    bufs.push(buf);
    sourceBuffer.appendBuffer(buf);
    await new Promise(rs => sourceBuffer.addEventListener("updateend", rs));
    await new Promise(rs => setTimeout(rs, 4000));
    if (i == chunks - 1) mediaSource.endOfStream();
  }
});
video.addEventListener("canplay", function () {
  video.play().catch(_ => {
    function play() {
      video.play();
      window.removeEventListener("click", play);
    }
    window.addEventListener("click", play);
  });
});
video.src = URL.createObjectURL(mediaSource);