Подтвердить что ты не робот

Показывать видеоролик после прочтения его через AJAX

В то время как я пытался создать обходное решение для неподдерживающих 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, но я застрял с видео файлами!

4b9b3361

Ответ 1

Это ответ на заполнение (разрешенный через OP, найденный в его комментариях), чтобы этот вопрос не появлялся в рамках "неотвеченных" вопросов.

От автора:

ОК, я решил проблему, добавив событие, ожидающее видео/изображение для загрузки перед выполнением метода revokeObjectURL:

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

Я предполагаю, что метод revokeObjectURL выполнялся перед видео была полностью загружена.