javascript - 通过 AJAX 阅读后显示视频 blob

Question

当我尝试在 IndexedDB 中为 Chrome 不支持的 blob 创建一个解决方法时，我发现我可以通过 AJAX 作为数组缓冲区读取图像，将其存储在 IndexedDB 中，提取它，将其转换为 blob，然后使用以下代码:

var xhr = new XMLHttpRequest(),newphoto;
xhr.open("GET", "photo1.jpg", true);    
xhr.responseType = "arraybuffer";
xhr.addEventListener("load", function () {
    if (xhr.status === 200) {
        newphoto = xhr.response;
        /* store "newphoto" in IndexedDB */
        ...
    }
}

document.getElementById("show_image").onclick=function() {
    var store = db.transaction("files", "readonly").objectStore("files").get("image1");
    store.onsuccess = function() {
        var URL = window.URL || window.webkitURL;
        var oMyBlob = new Blob([store.result.image], { "type" : "image\/jpg" });
        var docURL = URL.createObjectURL(oMyBlob);
        var elImage = document.getElementById("photo");
        elImage.setAttribute("src", docURL);
        URL.revokeObjectURL(docURL);
    }
}

这段代码工作正常。但是，如果我尝试相同的过程，但这次加载视频(.mp4)我无法显示它:

...    
var oMyBlob = new Blob([store.result.image], { "type" : "video\/mp4" });
var docURL = URL.createObjectURL(oMyBlob);
var elVideo = document.getElementById("showvideo");
elVideo.setAttribute("src", docURL);
...
<video id="showvideo" controls ></video>
...

即使我使用 xhr.responseType = "blob"并且没有将 blob 存储在 IndexedDB 中而是尝试在加载后立即显示它，它仍然无法正常工作!

xhr.responseType = "blob";
xhr.addEventListener("load", function () {
    if (xhr.status === 200) {
        newvideo = xhr.response;
        var docURL = URL.createObjectURL(newvideo);
        var elVideo = document.getElementById("showvideo");
        elVideo.setAttribute("src", docURL);
        URL.revokeObjectURL(docURL);
    }
}

下一步是尝试对 PDF 文件做同样的事情，但我被视频文件困住了!

Answer 1

这是一个填充答案(通过在他的评论中找到的 OP 解决)，以防止问题继续出现在“未回答”的问题下。

From the author:

OK, I solved the problem adding an event that waits for the video/image to load before executing the revokeObjectURL method:

var elImage = document.getElementById("photo");
elImage.addEventListener("load", function (evt) { URL.revokeObjectURL(docURL); } 
elImage.setAttribute("src", docURL);

I suppose the revokeObjectURL method was executing before the video was totally loaded.