Javascript IndexedDB-存储和检索视频

我正在尝试制作一个应用程序，在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）时的“应用程序/xml”，因此视频标签显示“不支持视频格式或mime类型”。 然而，当我得到一个像png这样的图像文件时，它会显示“image/png”，如果设置了img标记的src，那么效果会很好

问题2（Chrome）：在Chrome中，图像和视频甚至都没有存储到IndexedDB中。在以下行：

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

未捕获错误：DataCloneError:引发DOM IDBDatabase异常25

我是IndexedDB的新手，不知道如何解决这个问题。我需要做的就是将视频文件存储到indexedDB中，检索它并显示在视频标签中

HTML如下所示： （mp4）：

（ogv）：

---

也尝试不使用“codecs”属性。什么都不管用。我已经被这件事困扰了一天了。。。在谷歌上也找不到任何有效的例子。请有人帮我解决这个问题。

好的，我试着从评论中总结一下

1。Firefox

看起来，最初从AJAX请求中获得的

Blob

对象具有内容类型application/xml，因为这是从服务器得到的响应。这可能是一个配置错误的问题

如果您可以访问HTTP服务器的配置，则可以很容易地解决此问题。如果是Apache，您只需添加以下行：

AddType video/ogg .ogv

保存并重新启动Apache，您应该可以了。如果无法更改服务器的配置，则必须更改

Blob

的内容类型以匹配所需的内容类型：

blob = xhr.response.slice(0, xhr.response.size, "video/ogg");

请注意，这可能会占用大量内存，因为您正在（可能）复制一个大文件，但是

xhr.response

应该在几个步骤后发送到垃圾箱

2。铬

看来，铬仍然存在

他们似乎已经解决了这个问题，但还没有部署解决方案。我想知道他们在等什么：[

---

更新：截至2014年7月1日，Chrome开发进入IndexedDB。预计很快将进入稳定频道。

关于Chrome的问题，你确定对象存储已经创建了吗？我非常确定我有创建它所需的代码。我们有没有其他检查方法？你是否尝试过使用

add

而不是

put

？它似乎是

put

。是的，我尝试了Max。完全相同的错误：实际上，它存储的blob在Chrome中仍然不受支持。抱歉。您可能想改为使用文件系统API，并回退存储blob。Max非常感谢您的时间。但它仍然是“应用程序/xml”。：（blob=xhr.response.slice（0，xhr.response.size，“video/ogg”）；console.log（blob.type）；//这仍然是application/xml..与Video元素相同的错误这件事让我抓狂！！我认为Google在IndexedDB中推动文件系统API而不是blob。@user2104377尝试克隆它怎么样？

blob=new blob（[xhr.response]，“Video/ogg”）；

@user2104377您可以使用overrideMimeType（）函数重写mime类型，该函数是作为XMLHttpRequest级别2规范的一部分引入的

AddType video/ogg .ogv

blob = xhr.response.slice(0, xhr.response.size, "video/ogg");