Отображение видео из BLOB-объекта Javascript

Я хотел бы отобразить видео из объекта Javascript Blob/File в теге видео HTML5.

Этот код работает только для небольших видео:

var reader = new FileReader();
reader.onload = function(e) {
    document.getElementById("video").src=reader.result;
 }
reader.readAsDataURL(vid);

Я не могу использовать это для больших видео (> 10 МБ). Есть ли решение для отображения большого видео из объекта blob в HTML 5?


javascript html blob video
person Antonin M.    schedule 14.01.2013    source источник
comment
Можете ли вы предоставить больше информации о том, в чем проблема?   -  person Jan Hančič    schedule 14.01.2013
comment
Например, Chrome и Firefox выключались при попытке прочитать видео размером 15 МБ. Я думаю, что это из-за размера видео. Браузеры не могут прочитать и отобразить строку размером 15 МБ в HTML-коде.   -  person Antonin M.    schedule 14.01.2013

Ответы (2)


arrow_upward
48
arrow_downward

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

function display(vid){

    var video = document.getElementById("video");
    video.src = window.URL.createObjectURL(vid);

}
person Antonin M.    schedule 16.01.2013
comment
Какого типа параметр vid? - person Hubert Grzeskowiak; 15.05.2017
comment
@HubertGrzeskowiak это объект Blob или File - person Antonin M.; 15.05.2017
comment
Это только я все еще борюсь с этим? Извините, у меня не работает. - person Satys; 28.10.2017

arrow_upward
1
arrow_downward

В некоторых случаях blobObject.data следует указывать в методе createObjectURL(). Посмотрите на этот простой трюк:

function playVideo(videoStream){ // as blob 

 var video = document.querySelector('video');

 var videoUrl=window.URL.createObjectURL(videoStream.data);// blob.data gives actual data

 video.src = videoUrl;
}
person susan097    schedule 29.06.2018