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