18

Chrome が IndexedDB で BLOB をサポートしていないための回避策を作成しようとしていたときに、AJAX を介して画像を配列バッファーとして読み取り、IndexedDB に格納して抽出し、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 = "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 ファイルに対して同じことをしようとしていましたが、動画ファイルで行き詰っています!

4

1 に答える 1

3

これは、質問が「未回答」の質問の下に表示され続けるのを防ぐためのフィラーの回答です (彼のコメントにある OP を介して解決されます)。

著者より:

OK、revokeObjectURL メソッドを実行する前にビデオ/画像の読み込みを待機するイベントを追加して問題を解決しました。

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

ビデオが完全に読み込まれる前に revokeObjectURL メソッドが実行されていたと思います。

于 2014-01-06T19:09:10.070 に答える