我希望我的網站的用戶能夠使用 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 讀取非常大的視頻文件？
1 回答
一只甜甜圈
TA貢獻1836條經驗 獲得超5個贊
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;
}
- 1 回答
- 0 關注
- 203 瀏覽
添加回答
舉報
0/150
提交
取消