Question

我想使用IndexedDB在客户端存储用于离线HTML5应用的视频文件。为此，我从服务器API下载2块视频。然后我将它们作为blob存储在indexedDB中。然后在其他页面上我从db获取它们并创建新的blob。最后，我创建了objectURL并将其作为src分配给视频元素。下面的代码显示了我如何检索数据并将其分配给视频元素。我使用Dexie作为indexedDB包装器。

var db = new Dexie("database");
db.version(1).stores({
    videos: 'id,videoData'
});

db.open();
var file1;
var file2;
var getVideoFromDB = function (id) {
    var video = db.videos.get(id)
        .then(function (item) {
        file1 = item.videoData;
        var video2 = db.videos.get(2)
            .then(function (item2) {
            file2 = item2.videoData;
            var blob = new Blob([file1, file2], { "type": "video\/mp4" });
            blob.lastModifiedDate = new Date();
            blob.name = "test.mp4";

                var URL = window.URL || window.webkitURL;
                var videoURL = URL.createObjectURL(blob);
                var videoElement = document.getElementById("Video1");
                videoElement.setAttribute("src", videoURL);
                });
    });
};

getVideoFromDB(1);

当然，在桌面版Chrome上，它可以运行。我可以轻松地播放和浏览视频。在移动版本上，我可以开始播放和导航，但只能通过第一块视频。当视频转到其他部分时 - 与其他部分一起，播放器停止黑屏并出现错误“无法播放视频”。我相信这是一个错误，但也许我做错了，我的问题有任何解决方法。我试图在db中保存由块组成的blob，然后获取它并分配给视频src并且它有效，所以我认为在移动版Chrome中Blob构造函数存在问题。它对我来说不是一个解决方案，因为我存储了大型对象，为此我需要多2倍的存储空间。存储是有限的，我不能浪费它;）更多我检查了这个chunked blob在chrome：// blob-internals /和移动/桌面版本上看起来几乎相同，只有路径不同。它看起来像这样：

5670c0d3-7c48-4edf-a40b-e9361de45fbe
Refcount: 3
Content Type: video/mp4
Count: 2
Index: 0
Type: file
Path: C:\Users\jsobus\AppData\Local\Google\Chrome\UserData\Default\IndexedDB\http_localhost_0.indexeddb.blob\1\00\2
Length: 353 073 708
Index: 1
Type: file
Path: C:\Users\jsobus\AppData\Local\Google\Chrome\UserData\Default\IndexedDB\http_localhost_0.indexeddb.blob\1\00\3
Length: 353 073 707

来自块的HTML5视频保存在IndexedDB Chrome for Android中

0 个答案: