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

我想使用 IndexedDB 在客户端存储离线 HTML5 应用程序的视频文件。为此，我从服务器 API 中下载了 2 个块的视频。然后我将它们作为 blob 存储在 indexedDB 中。然后在其他页面上我从数据库获取它们并创建新的 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 上它是有效的。我可以轻松播放和浏览视频。在移动版本上，我可以开始播放和导航，但只能通过第一个视频块。当视频转到其他部分 - 包含其他块时，播放器会停止并出现黑屏，并出现错误“无法播放视频”。我相信这是一个错误，但也许我做错了什么，并且有任何解决方法可以解决我的问题。我尝试将由块组成的 blob 保存在数据库中，然后获取它并分配给视频 src 并且它可以工作，所以我认为移动版 Chrome 中的 Blob 构造函数存在问题。这对我来说不是一个解决方案，因为我存储大型对象，为此我需要 2 倍以上的存储空间。存储空间有限，我不能这样浪费它；）更重要的是，我检查了这个分块 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