javascript - createobjecturl - Mostrar video blob después de leerlo a través de AJAX

javascript download file from url

Question

Mientras intentaba crear una solución alternativa para las manchas no compatibles de Chrome en IndexedDB, descubrí que podía leer una imagen a través de AJAX como un arraybuffer, almacenarla en IndexedDB, extraerla, convertirla en una gota y luego mostrarla en un elemento utilizando siguiente código:

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

Este código funciona bien. Pero si intento el mismo proceso, pero esta vez cargando un video (.mp4) no puedo mostrarlo:

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

Incluso si uso xhr.responseType = "blob" y no almaceno el blob en IndexedDB sino que intento mostrarlo inmediatamente después de cargarlo, ¡todavía no funciona!

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

El siguiente paso fue tratar de hacer lo mismo con los archivos PDF, ¡pero estoy atascado con los archivos de video!

Answer 1

Esta es una respuesta de relleno (resuelta a través del OP que se encuentra en sus comentarios) para evitar que la pregunta continúe apareciendo en preguntas "sin respuesta".

Del autor:

OK, resolví el problema agregando un evento que espera a que el video / imagen se cargue antes de ejecutar el método revokeObjectURL:

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

Supongo que el método revokeObjectURL se estaba ejecutando antes de que el video estuviera totalmente cargado.