如何使用 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，而是一个空字符串。

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

Answer 1

JavaScript中的FileReaderclass包含multiple methods to read files:

readAsText()：这会读取一个文件，returns 其内容作为文本。适用于小文本文件。
readAsBinaryString()：这会读取一个文件，returns 其内容作为二进制字符串。适用于任何类型的小文件。
readAsDataURL()：这会读取一个文件和 returns 引用它的数据 URL。这对于大文件来说效率低下，因为文件在处理之前会作为一个整体加载到内存中。
readAsArrayBuffer()：这会读取一个文件和 returns 一个包含输入文件 'chopped up in smaller pieces' 的 ArrayBuffer。这也适用于非常大的文件。

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

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

现在，文件 reader returns 加载文件后 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;
}

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

How to read large video files in JavaScript using FileReader?

html

javascript

video

filereader