Show video blob after reading it through AJAX

Question

While I was trying to create a workaround for Chrome unsupporting blobs in IndexedDB I discovered that I could read an image through AJAX as an arraybuffer, store it in IndexedDB, extract it, convert it to a blob and then show it in an element using the following code:

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);
    }
}

This code works fine. But if I try the same process, but this time loading a video (.mp4) I can't show it:

...    
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>
...

Even if I use xhr.responseType = "blob" and not storing the blob in IndexedDB but trying to show it immediately after loading it, it still does not works!

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);
    }
}

The next step was trying to do the same thing for PDF files, but I'm stuck with video files!

I figure out that the problem is with the following command: URL.revokeObjectURL(docURL);. Without it the video is shown. With it I get the following error: GET blob:http%3A//localhost/c8009120-e025-46e3-8822-69d18c5a36b4 404 (Not Found) — Pedro Almeida, Jun 09 '13 at 18:46
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. — Pedro Almeida, Jun 09 '13 at 23:23
you should answer with "answer your own question", so your answer doesn't keep showing up as unanswered in stackoverflow. — sonjz, Aug 12 '13 at 19:48

score 3 · Answer 1 · edited May 23 '17 at 12:06

This is a filler answer (resolved via the OP found in his comments) to prevent the question from continuing to show up under "unanswered" questions.

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.

Show video blob after reading it through AJAX

1 Answers1