Blob在下载时播放视频

Question

我有一个JavaScript，可以使用range下载文件，而在下载range / part时，我需要从服务器下载时播放视频的方法。现在Blob创建后无法更新。每次创建新的Blob都会使播放器继续跳动，并且在下载完所有数据之后会停止。因此如何使播放器像YouTube播放器一样流畅运行

let test_url = "http://localhost/JsPlayer/file.mp4";
var byteNumbers = [];
window.addEventListener("load", function () {init();},false);
function init() {
  let player = document.getElementsByTagName("video")[0];
  var typedArray = GetMovData(player,0,250 * 1024);
}
function GetMovData(player,start,end) {
  var xhr = new XMLHttpRequest();
  xhr.responseType = 'blob';
  xhr.onload = function() {
    var lenght = parseInt(xhr.getResponseHeader("Content-Range").split("/")[1]);
    var reader = new FileReader();
    reader.onloadend = function() {
      var byteCharacters = atob(reader.result.slice(reader.result.indexOf(',') + 1));
      for (var i = start ; i < end; i++) {
        byteNumbers[i] = byteCharacters.charCodeAt(i - start);
      }
      if (end <  lenght){
        let max = end + 250 * 1024;
        if (max > lenght) {
          max = lenght;
        }
        // loop just for testing will change later
        GetMovData(player,end,max)
      }else{
        var byteArray = new Uint8Array(byteNumbers);
        var blob = new Blob([byteArray], {type: 'video/ogg'});
        var url = URL.createObjectURL(blob);
        player.src = url;
      }
    }
    reader.readAsDataURL(xhr.response);

  };
  xhr.open('GET', test_url);
  xhr.setRequestHeader("Range", "bytes=" + start + "-" + end);
  xhr.send();
}