通过AJAX读取后显示视频blob

Question

当我试图在IndexedDB的Chrome的非对应的斑点,我发现我可以作为arraybuffer通过AJAX读取图像,将其存储在索引资料,提取它,将其转换为一个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 ="斑点",而不是存储在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解决），以防止问题继续出现在“未回答”的问题下。

来自作者：

好的，我解决了这个问题，添加了一个在执行 revokeObjectURL 方法之前等待视频/图像加载的事件：

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

我想 revokeObjectURL 方法是在视频完全加载之前执行的。