我想使用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