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