Display a video from a Blob Javascript
81,007
Solution 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
}
Solution 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;
}
Related videos on Youtube
Comments
-
Antonin M. almost 2 years
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?
-
Jan Hančič over 11 yearsCan you provide more info on what the issue is?
-
Antonin M. over 11 yearsFor example, Chrome and Firefox shutdown when they tried to read a 15 MB video. I think that it's due to the video size. Browsers cannot read and display a 15MB string in the HTML code.
-
-
Hubert Grzeskowiak almost 7 yearsWhat type is the
vid
parameter? -
Antonin M. almost 7 years@HubertGrzeskowiak it is a Blob or File object
-
Satys over 6 yearsIs it only me who is still struggling with it? Sorry, not working for me.
-
Dai over 2 years@Satys I've updated this answer to make things more clearer, I hope it helps.
-
Dai over 2 yearsThe
Blob
type does not have a property nameddata
, so yourvideoStream
object is not actuallyBlob
but some other type. See developer.mozilla.org/en-US/docs/Web/API/Blob