How to read large video files in JavaScript using FileReader?

Question

Can anyone help me with how I can able to read large files using FileReader? I was trying to read the video which has been uploaded by the user on my website. Any help would be appreciated.

Answer 1

Basically, there are multiple ways to read the files using FileReader, but to read a video, you can use readAsArrayBuffer() method. This will returns as ArrayBuffer, after that we need to convert this to a blob to get the URL of that video:

let reader = new  FileReader();

reader.readAsArrayBuffer(file);

reader.onload = function(e) {

  // The file reader gives us an ArrayBuffer:

  let buffer = e.target.result;

  // We have to convert the buffer to a blob:

  let videoBlob = new Blob([new Uint8Array(buffer)], { type: 'video/mp4' });

  // The blob gives us a URL to the video file:

  let url = window.URL.createObjectURL(videoBlob);

  video.src = url;

}

I hope this will help.

Want to know more about Java? Prefer this tutorial on Learn Java.

Want to become a Java Expert? Join Java Certification now!!