如何使用 FileReader 在 JavaScript 中读取大型视频文件？

Question

我希望我的网站的用户能够使用 HTML 的文件输入将一个潜在的大型视频文件上传到它。然后应该在用户的浏览器中本地处理和播放视频。

let fileInput = document.createElement("INPUT");
fileInput.setAttribute("type", "file");
fileInput.onChange = onFileSelected;

要读取用户上传的视频文件，我想使用File Reader这样的：

function onFileSelected(e) {
  // The file uploaded by the user:
  let file = e.target.files[0];

  // Create a file reader:
  let reader = new  FileReader();
  reader.readAsDataURL(file);
  reader.onload = function(e) {
    video.src = e.target.result;
  }
}

但是，当我上传非常大的视频文件（？300 MB）时，e.target.result它不是视频文件的 URI，就像我预期的那样，而是一个空字符串。

如何使用File ReaderJavaScript读取非常大的视频文件？

Answer 1

FileReaderJavaScript 中的类包含多种读取文件的方法：

• readAsText()：这会读取一个文件并将其内容作为文本返回。适用于小文本文件。
• readAsBinaryString()：这会读取文件并将其内容作为二进制字符串返回。适用于任何类型的小文件。
• readAsDataURL()：这会读取一个文件并返回一个引用它的数据 URL。这对于大文件来说是低效的，因为文件在被处理之前作为一个整体加载到内存中。
• readAsArrayBuffer()：这会读取一个文件并返回一个ArrayBuffer包含“切碎成小块”的输入文件。这也适用于非常大的文件。

在问题中，使用该readAsDataURL()方法通常是最方便的。但是，对于非常大的视频文件（以及一般非常大的文件），由于上述原因导致空结果，它不起作用。相反，您应该使用readAsArrayBuffer()：

let reader = new  FileReader();
reader.readAsArrayBuffer(file);

现在，文件阅读器ArrayBuffer在加载文件后返回一个。为了能够以 HTML 格式显示视频，我们必须将此缓冲区转换为 blob，然后可以为我们提供视频文件的 URL：

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