如何使用 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 中的FileReader class 包含多種讀取文件的方法：

• readAsText() ：讀取文件並將其內容作為文本返回。 適用於小型文本文件。
• readAsBinaryString() ：讀取文件並將其內容作為二進制字符串返回。 適用於任何類型的小文件。
• readAsDataURL() ：這會讀取一個文件並返回一個引用它的 Data URL。 這對於大文件來說是低效的，因為文件在處理之前作為一個整體加載到 memory 中。
• 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;
}