如何使用 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

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

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

}