AJAX를 통해 비디오를 읽은 후 blob을

AJAX를 통해 비디오를 읽은 후 blob을

IndexedDB에서 Chrome unsupport blobs에 대한 해결책을 작성하는 동안 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"을 사용하고 IndexedDB에 blob을 저장하지 않고 로딩 후 바로 보여주려 해도 여전히 작동하지 않습니다!

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 파일에 대해서도 동일한 작업을 시도하는 것이었지만 비디오 파일이 막힙니다!

이는 질문이 "답변되지 않은" 질문에 계속 표시되는 것을 방지하기 위한 보충 답변입니다(의견에서 확인된 OP를 통해 해결됨).

작성자로부터:

네, recreafeObject를 실행하기 전에 비디오/이미지가 로드될 때까지 기다리는 이벤트를 추가하여 문제를 해결했습니다.URL 메서드:

var elImage = document.getElementById("photo");
elImage.addEventListener("load", function (evt) { URL.revokeObjectURL(docURL); } 
elImage.setAttribute("src", docURL);

recreafeObject라고 가정합니다.동영상이 완전히 로드되기 전에 URL 메서드가 실행되고 있습니다.

언급URL : https://stackoverflow.com/questions/17012313/show-video-blob-after-reading-it-through-ajax