HTML5 Video from chunks saved in IndexedDB Chrome for Android

泄露秘密 提交于 2019-12-07 14:13:47

问题


I would like to use IndexedDB to store video files on client side for offline HTML5 app. To do so I download video in 2 chunks from server API. Then I store them in indexedDB as a blobs. Then on other page I get them from db and create new blob. Finally I create objectURL and assign it to video element as src. Code below show how I retrieve data and assign it to video element. I am using Dexie as a indexedDB wrapper.

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

Of course on desktop version of Chrome it works. I can easily play and navigate through video. On mobile version I can start playing and navigate but only through first chunk of video. When video go to other part - with other chunk, player stops with black screen and error "Can't play video" appears. I believe it is a bug but maybe I do something wrong and there is any workaround for my problem. I tried to save blob made from chunks in db, then get it and assign to video src and it works, so I think there is a problem with Blob constructor in mobile version of Chrome. It is not a solution for me, because I store large objects and to do so I need 2x more storage. Storage is limited and I can not waste it like that ;) What is more I checked how this chunked blob looks on chrome://blob-internals/ and on mobile/desktop version it looks nearly same, only paths are different. It looks like this:

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

来源:https://stackoverflow.com/questions/30392426/html5-video-from-chunks-saved-in-indexeddb-chrome-for-android

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!