Zeigen Sie video-blob-nach dem Lesen durch AJAX

Während ich versuchte, erstellen einen workaround für Chrome unsupporting blobs in IndexedDB ich entdeckte, dass ich Lesen konnte, ein Bild durch AJAX als arraybuffer, speichern Sie es in IndexedDB, extrahieren Sie, wandeln Sie es in ein blob und dann zeigen Sie es in einem element mit dem folgenden 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);
    }
}

Dieser code funktioniert einwandfrei. Aber wenn ich versuche, den gleichen Prozess, aber dieses mal laden ein video (.mp4) kann ich nicht zeigen es:

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

Sogar, wenn ich mit xhr.responseType = "blob" und nicht speichern der blob in IndexedDB, versuchen aber zu zeigen, dass es sofort nach dem laden, es immer noch nicht funktioniert!

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

Nächsten Schritt wurde versucht, die gleiche Sache zu tun für PDF-Dateien, aber ich bin stecken mit video-Dateien!

  • Ich vermute, dass das problem mit dem folgenden Befehl: URL.revokeObjectURL(docURL);. Ohne Sie wird das video angezeigt wird. Mit ihm bekomme ich die folgende Fehlermeldung: GET blob:http%3A//localhost/c8009120-e025-46e3-8822-69d18c5a36b4 404 (Nicht Gefunden)
  • OK, ich habe das problem gelöst, das hinzufügen von ein Ereignis, das wartet, bis das video/Bild laden vor der Ausführung der revokeObjectURL Methode: var elImage = document.getElementById("Foto"); elImage.addEventListener("load", function (evt) { URL.revokeObjectURL(docURL); } elImage.setAttribute("src", docURL); ich nehme an, die revokeObjectURL Methode ausgeführt wurde, bevor das video war Total geladen.
  • Sie sollte Antworten mit "Ihre eigene Frage zu beantworten", so Ihre Antwort nicht angezeigt zu halten als unbeantwortet in stackoverflow.
Schreibe einen Kommentar