如何使用FileReader在JavaScript中读取大型视频文件? [英] How to read large video files in JavaScript using FileReader?

问题描述

我希望我网站的用户能够使用HTML的文件输入将可能很大的视频文件上传到该网站.视频应在用户的浏览器中本地处理和播放.

I want the user of my website to be able to upload a potentially large video file to it using HTML‘s file input. The video should than be processed and played locally in the user‘s browser.

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

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

To read the video file uploaded by the user, I wanted to use a File Reader like this:

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，就像我期望的那样，而是一个空字符串.

However, when I uploaded really large video files (≈300 MB), e.target.result was not a URI to the video file, like I expected, but an empty string.

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

How can I read very large video files using File Reader in JavaScript?

推荐答案

JavaScript中的 FileReader 类包含

The FileReader class in JavaScript contains multiple methods to read files:

• readAsText():这将读取文件并以文本形式返回其内容.适用于小型文本文件.
• readAsBinaryString():这将读取文件并以二进制字符串的形式返回其内容.适用于任何类型的小文件.
• readAsDataURL():这将读取文件并返回引用该文件的数据URL.对于大型文件，这是无效的，因为文件在处理之前会整体加载到内存中.
• readAsArrayBuffer():这将读取一个文件并返回一个 ArrayBuffer ，其中包含切成小块"的输入文件.这也适用于非常大的文件.

• readAsText(): This reads a file and returns its content as text. Suitable for small text files.
• readAsBinaryString(): This reads a file and returns its content as a binary string. Suitable for small files of any type.
• readAsDataURL(): This reads a file and returns a Data URL referencing it. This is inefficient for large files as the file is loaded into memory as a whole before being processed.
• readAsArrayBuffer(): This reads a file and returns an ArrayBuffer containing the input file 'chopped up in smaller pieces'. This works for very large files, too.

在问题中，通常使用 readAsDataURL()方法，因为它通常是最方便的.但是，对于非常大的视频文件(通常是非常大的文件)，由于上述原因而无法使用，导致结果为空.相反，您应该使用 readAsArrayBuffer():

In the question, the readAsDataURL() method is used as it is usually most convenient. However, for very large video files (and very large files in general) it does not work for the reason described above leading to an empty result. Instead, you should use readAsArrayBuffer():

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

现在，文件读取器在加载文件后返回 ArrayBuffer .为了能够以HTML格式显示视频，我们必须将该缓冲区转换为Blob，然后可以为我们提供视频文件的URL:

Now, the file reader returns an ArrayBuffer after loading the file. In order to be able to show the video in HTML, we have to convert this buffer to a blob, that can then give us a URL to the video file:

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中读取大型视频文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！