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

 /**  * @param {Blob} videoFile  * @param {HTMLVideoElement} videoEl   * @returns {void}  */ function display( videoFile, videoEl ) {      // Preconditions:     if( !( videoFile instanceof Blob ) ) throw new Error( '`videoFile` must be a Blob or File object.' ); // The `File` prototype extends the `Blob` prototype, so `instanceof Blob` works for both.     if( !( videoEl instanceof HTMLVideoElement ) ) throw new Error( '`videoEl` must be a <video> element.' );          //       const newObjectUrl = URL.createObjectURL( videoFile );              // URLs created by `URL.createObjectURL` always use the `blob:` URI scheme: https://w3c.github.io/FileAPI/#dfn-createObjectURL     const oldObjectUrl = videoEl.currentSrc;     if( oldObjectUrl && oldObjectUrl.startsWith('blob:') ) {         // It is very important to revoke the previous ObjectURL to prevent memory leaks. Un-set the `src` first.         // See https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL          videoEl.src = ''; // <-- Un-set the src property *before* revoking the object URL.         URL.revokeObjectURL( oldObjectUrl );     }      // Then set the new URL:     videoEl.src = newObjectUrl;      // And load it:     videoEl.load(); // https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/load      } 

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