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

Пока я пытался создать обходной путь для Chrome, не поддерживающего большие двоичные объекты в IndexedDB, я обнаружил, что могу читать изображение через AJAX в качестве буфера массива, сохранять его в IndexedDB, извлекать его, преобразовывать в большой двоичный объект, а затем отображать его в элементе с помощью следующий код:

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>
...

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

Следующим шагом была попытка сделать то же самое для файлов PDF, но я застрял с видеофайлами!


javascript ajax blob indexeddb html5-filesystem
person Pedro Almeida    schedule 09.06.2013    source источник
comment
Я понимаю, что проблема связана со следующей командой: URL.revokeObjectURL(docURL);. Без него видео показывается. При этом я получаю следующую ошибку: GET blob:http%3A//localhost/c8009120-e025-46e3-8822-69d18c5a36b4 404 (не найдено)   -  person Pedro Almeida    schedule 09.06.2013
comment
Хорошо, я решил проблему, добавив событие, которое ожидает загрузки видео/изображения перед выполнением метода revokeObjectURL: var elImage = document.getElementById(photo); elImage.addEventListener(load, function (evt) { URL.revokeObjectURL(docURL); } elImage.setAttribute(src, docURL); Я полагаю, что метод revokeObjectURL выполнялся до полной загрузки видео.   -  person Pedro Almeida    schedule 10.06.2013
comment
вы должны ответить ответом на свой вопрос, чтобы ваш ответ не оставался без ответа в stackoverflow.   -  person sonjz    schedule 12.08.2013

Ответы (1)


arrow_upward
3
arrow_downward

Это дополнительный ответ (решенный с помощью ОП, найденного в его комментариях), чтобы вопрос больше не отображался в разделе "вопросы без ответа".

От автора:

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

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

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

person Jonn    schedule 06.01.2014