Ajax blob视频,javascript - Show video blob after reading it through AJAX - Stack Overflow

While I was trying to create a workaround for Chrome unsupporting blobs in IndexedDB I discovered that I could read an image through AJAX as an arraybuffer, store it in IndexedDB, extract it, convert it to a blob and then show it in an element using the following code:

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").οnclick=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);

}

}

This code works fine. But if I try the same process, but this time loading a video (.mp4) I can't show it:

...

var oMyBlob = new Blob([store.result.image], { "type" : "video\/mp4" });

var docURL = URL.createObjectURL(oMyBlob);

var elVideo = document.getElementById("showvideo");

elVideo.setAttribute("src", docURL);

...

...

Even if I use xhr.responseType = "blob" and not storing the blob in IndexedDB but trying to show it immediately after loading it, it still does not works!

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

}

}

The next step was trying to do the same thing for PDF files, but I'm stuck with video files!