В то время как я пытался создать обходное решение для неподдерживающих Chrome blobs в IndexedDB, я обнаружил, что могу читать изображение через AJAX в виде массива, хранить его в IndexedDB, извлекать, преобразовывать в blob, а затем показывать его в элемент, используя следующий код:
var xhr = new XMLHttpRequest(),newphoto;
xhr.open("GET", "photo1.jpg", true);
xhr.responseType = "arraybuffer";
xhr.addEventListener("load", function () {
if (xhr.status === 200) {
newphoto = xhr.response;
/* store "newphoto" in IndexedDB */
...
}
}
document.getElementById("show_image").onclick=function() {
var store = db.transaction("files", "readonly").objectStore("files").get("image1");
store.onsuccess = function() {
var URL = window.URL || window.webkitURL;
var oMyBlob = new Blob([store.result.image], { "type" : "image\/jpg" });
var docURL = URL.createObjectURL(oMyBlob);
var elImage = document.getElementById("photo");
elImage.setAttribute("src", docURL);
URL.revokeObjectURL(docURL);
}
}
Этот код работает нормально. Но если я попробую тот же процесс, но на этот раз, загружая видео (.mp4), я не могу его показать:
...
var oMyBlob = new Blob([store.result.image], { "type" : "video\/mp4" });
var docURL = URL.createObjectURL(oMyBlob);
var elVideo = document.getElementById("showvideo");
elVideo.setAttribute("src", docURL);
...
<video id="showvideo" controls ></video>
...
Даже если я использую xhr.responseType = "blob" и не сохраняю blob в IndexedDB, но пытаюсь показать его сразу после его загрузки, он все равно не работает!
xhr.responseType = "blob";
xhr.addEventListener("load", function () {
if (xhr.status === 200) {
newvideo = xhr.response;
var docURL = URL.createObjectURL(newvideo);
var elVideo = document.getElementById("showvideo");
elVideo.setAttribute("src", docURL);
URL.revokeObjectURL(docURL);
}
}
Следующий шаг пытался сделать то же самое для файлов PDF, но я застрял с видео файлами!