通过AJAX读取视频blob后显示它

Question

在我尝试为Chrome不支持IndexedDB中的Blob创建解决方法时，我发现可以通过AJAX将图像作为ArrayBuffer读取，将其存储在IndexedDB中，提取它，将其转换为Blob，然后使用以下代码在<img>元素中显示：

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文件做同样的事情，但是我卡在了视频文件上！

- Pedro Almeida

---

我发现问题出在以下命令上：URL.revokeObjectURL（docURL）;。如果没有它，视频就可以显示。但是如果有这个命令，我会收到以下错误：GET blob：http％3A //localhost/c8009120-e025-46e3-8822-69d18c5a36b4 404（未找到） - Pedro Almeida

好的，我添加了一个事件来等待视频/图像加载完毕后再执行revokeObjectURL方法来解决问题：var elImage = document.getElementById("photo"); elImage.addEventListener("load", function (evt) { URL.revokeObjectURL(docURL); } elImage.setAttribute("src", docURL);我猜测revokeObjectURL方法是在视频完全加载之前就被执行了。 - Pedro Almeida

你应该回答自己的问题，这样你的答案就不会一直显示为未回答的状态在StackOverflow上。 - sonjz

Answer 1

这是一个填充答案（通过在他的评论中找到的OP解决）以防止问题继续显示在“未回答”的问题下。

来自作者：

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.

- Jonn