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

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

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

要读取用户上传的视频文件，我想使用

文件读取器

，如下所示：

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中的

文件读取器

读取非常大的视频文件？

JavaScript中的

文件读取器

类包含：

• readAsText（）

  ：读取文件并以文本形式返回其内容。适用于小文本文件

• readAsBinaryString（）

  ：读取文件并将其内容作为二进制字符串返回。适用于任何类型的小文件

• readAsDataURL（）

  ：读取文件并返回引用该文件的数据URL。对于大型文件来说，这是低效的，因为文件在处理之前会作为一个整体加载到内存中

• readAsArrayBuffer（）

  ：读取一个文件并返回一个

  ArrayBuffer

  ，其中包含输入文件“切碎成小块”。这也适用于非常大的文件

在这个问题中，使用

readAsDataURL（）

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

readAsArrayBuffer（）

：

现在，文件读取器在加载文件后返回一个

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

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