Html 渐进式加载和播放base64片段中的视频

我有很多base64的视频片段

我只想在接收视频时逐步播放视频

    var fileInput = document.querySelector('input#theInputFile');//multiple

fileInput.addEventListener('change', function(e) {
    var files = fileInput.files;
    for (var i = 0; i < files.length; i++) {
        var file = fileInput.files[i]
        fileLoaded(file, 0, 102400, file.size);
    };

    e.preventDefault();
});

videoA=[];
function fileLoaded(file, ini, end, size) {
    if (end>size){end=size}
    var reader = new FileReader();
    var fr = new FileReader();
    fr.onloadend = function(e) {
        if (e.target.readyState == FileReader.DONE) {
            var piece = e.target.result;
            display(piece.replace('data:video/mp4;base64,', ''));
        }
    };

    var blob = file.slice(ini, end, file.type);
    fr.readAsDataURL(blob);
    var init = end;
    var endt = init+end;
      if (end<size){
        fileLoaded(file, init, end, size);  
      }

}

我知道不是这样的，但我正在尝试搜索，任何回应都会根据我搜索的内容进行调整。 即使我也不确定这是否可能

谢谢

编辑 我试着一个接一个地播放区块，第一个区块播放得很好，但其他区块给出了错误： “未捕获（承诺中）DomeException:未能加载，因为找不到支持的源”。

---

如果我能正确地将块创建到base64，对我来说就足够了。好的，解决方案是从浏览器中原始上传的文件中创建base64块，由html5播放器播放 所以我提出了另一个问题。

    var a=0;
    function display(vid, ini, end) {
        videoA.push(vid);
        $('#video').attr('src','data:video/mp4;base64,'+videoA[a]);
        a++;
    }