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（'文件类型：'+ vidFile.type）;上面显示“application / xml”，同时获取视频文件（mp4，ogv，webm），因此Video标签显示“不支持视频格式或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）：

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

还尝试没有“codecs”属性。什么都行不通。我一直坚持这个为dayss ...也无法通过谷歌找到任何工作的例子。有人帮我这个。

Answer 1

好的，我会尝试总结评论中的内容。

<强> 1。火狐

最初，您从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。铬

Chrome似乎仍然是doesn't support Blob and File storing。

似乎他们已经修复了问题，但还没有部署修复程序。我不知道他们在等什么：[

更新：自2014年7月1日起，Chrome dev supports storing blobs进入IndexedDB。预计很快就会登陆稳定的通道。

IndexedDB - 存储和检索视频

1 个答案: