Display a video from a Blob Javascript

Question

I would like to display a video from a Javascript Blob/File object in the HTML5 video tag.

This code only works for small videos:

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

I cannot use this for big videos (> 10MB). Is there a solution to display a big video from a blob object in HTML 5?

Answer 1

I've found. It was so simple that I didnt even see it...

function display(vid){

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

}

Answer 2

In some case blobObject.data should be provided in createObjectURL() method. See this simple trick:

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