javascript - IndexedDB - ビデオの保存と取得

Question

ビデオ ファイルを IndexedDB との間で保存および取得するアプリケーションを作成しようとしています。ただし、Firefox での取得中および Chrome への保存中に問題が発生しています。コードを投稿します：

(function () {
    // IndexedDB
    var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.OIndexedDB || window.msIndexedDB,
        IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.OIDBTransaction || window.msIDBTransaction,
        dbVersion = 1.0;

    // Create/open database
    var request = indexedDB.open("videoFiles", dbVersion);
        var db;
        var createObjectStore = function (dataBase) {
            // Create an objectStore
            console.log("Creating objectStore")
            dataBase.createObjectStore("earth");
        },

        getVideoFile = function () {
            // Create XHR
            var xhr = new XMLHttpRequest(),
                blob;

            xhr.open("GET", "day_the_earth_stood_still.ogv", true);
            // Set the responseType to blob
            xhr.responseType = "blob";

            xhr.addEventListener("load", function () {
                if (xhr.status === 200) {
                    console.log("Video retrieved");

                    // Blob as response
                    blob = xhr.response;
                    console.log("Blob:" + blob);

                    // Put the received blob into IndexedDB
                    putEarthInDb(blob);
                }
            }, false);
            // Send XHR
            xhr.send();
        },

        putEarthInDb = function (blob) {
            console.log("Putting earth in IndexedDB");

            // Open a transaction to the database
            var transaction = db.transaction(["earth"], "readwrite");

            // Put the blob into the dabase
            var put = transaction.objectStore("earth").put(blob, "video");




            // Retrieve the file that was just stored
            transaction.objectStore("earth").get("video").onsuccess = function (event) {
                var vidFile = event.target.result;
                console.log("Got earth!" + vidFile);
                console.log('File Type: ' + vidFile.type); /// THIS SHOWS : application/xml

                // Get window.URL object
                var URL = window.URL || window.webkitURL;

                // Create and revoke ObjectURL
                var vidURL = URL.createObjectURL(vidFile);

                // Set vid src to ObjectURL

                var vidEarth = document.getElementById("earth");
                vidEarth.setAttribute("src", vidURL);




                // Revoking ObjectURL
                URL.revokeObjectURL(vidURL);
            };
        };

    request.onerror = function (event) {
        console.log("Error creating/accessing IndexedDB database");
    };

    request.onsuccess = function (event) {
        console.log("Success creating/accessing IndexedDB database");
        db = request.result;

        db.onerror = function (event) {
            console.log("Error creating/accessing IndexedDB database");
        };

        // Interim solution for Google Chrome to create an objectStore. Will be deprecated
        if (db.setVersion) {
            if (db.version != dbVersion) {
                var setVersion = db.setVersion(dbVersion);
                setVersion.onsuccess = function () {
                    createObjectStore(db);
                    getVideoFile();
                };
            }
            else {
                getVideoFile();
            }
        }
        else {
            getVideoFile();
        }
    }

    // For future use. Currently only in latest Firefox versions
    request.onupgradeneeded = function (event) {
        createObjectStore(event.target.result);
    };
})();

問題 1 (Firefox): Firefox では、次の行 console.log('File Type: ' + vidFile.type); 上記は、ビデオ ファイル (mp4、ogv、webm) の取得中に「application/xml」を示しているため、Video タグには「ビデオ形式または MIME タイプはサポートされていません」と表示されます。ただし、png のような画像ファイルを GET すると、「image/png」と表示され、img タグの src が設定されている場合はうまく機能します。

問題 2 (Chrome): Chrome では、画像と動画の両方が IndexedDB に保存されていません。次の行で：

var put = transaction.objectStore("earth").put(blob, "video");

キャッチされないエラー: DataCloneError: DOM IDBDatabase 例外 25 がスローされます。

私は IndexedDB を初めて使用し、これを解決する方法がわかりません。動画ファイルを indexedDB に保存し、取得して Video タグに表示するだけです。

HTML を以下に示します: (mp4):

 <div class="myVidDiv">
    <video  id="earth" type="video/mp4" codecs="avc1.42e01e, mp4a.40.2" controls>  </video>
 </div>

(ogv):

 <div class="myVidDiv">
    <video  id="earth" type="video/ogg" codecs="theora, vorbis" controls></video>
 </div>

「コーデック」属性なしでも試しました。何も機能しません。私はこれで何日も一緒に立ち往生してきました...グーグルでも実際の例が見つかりませんでした。誰か親切にこれを手伝ってください。