Question

当我尝试为IndexedDB中的Chrome不支持blob创建解决方法时，我发现我可以通过AJAX读取图像作为arraybuffer，将其存储在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:

好的，我解决了添加等待事件的事件的问题要在执行revokeObjectURL方法之前加载的视频/图像：
var elImage = document.getElementById("photo");
elImage.addEventListener("load", function (evt) { URL.revokeObjectURL(docURL); } 
elImage.setAttribute("src", docURL);
我认为revokeObjectURL方法在视频之前执行完全装满了。

通过AJAX读取后显示视频blob

1 个答案: