使用 node.js fs.readStream() 在電子 html5 視頻播放器中播放本地視頻文件

Question

我正在開發一個視頻播放器應用程序，它使用 node.js 和電子從本地文件系統播放視頻視頻 (.mp4)（因此我使用的是 Chromium 的 html5 視頻播放器）。

播放大於 2GB 的視頻視頻似乎是我目前的方法的一個問題。

我曾經使用 fs.readFileSync 讀取本地視頻文件並將該 Blob 傳遞給視頻播放器，如下代碼所示：

this.videoNode = document.querySelector('video');
const file: Buffer = fs.readFileSync(video.previewFilePath);
this.fileURL = URL.createObjectURL(new Blob([file]));
this.videoNode.src = this.fileURL;

這確實適用於小於 2GB 的視頻文件。 大於 2GB 的文件會觸發以下錯誤：

ERROR RangeError [ERR_FS_FILE_TOO_LARGE]: File size (2164262704) is greater than possible Buffer: 2147483647 bytes
    at tryCreateBuffer (fs.js:328)
    at Object.readFileSync (fs.js:364)
    at Object.fs.readFileSync (electron/js2c/asar.js:597)

我相信解決方案是使用 fs.readStream() 將 ReadStream 傳遞給 html5 視頻播放器。 不幸的是，我找不到有關如何將此流傳遞給視頻播放器的任何文檔。

Answer 1

正如該主題所說，您正在使用電子，並且從上面的評論中可以明顯看出您正在避免使用服務器。 看起來，如果您只是創建一個離線視頻播放器，那么您只會讓事情變得復雜。 你為什么要創建一個緩沖區，然后創建一個新的 url？ 您可以通過簡單地獲取視頻路徑並將其用作視頻對象的 src 屬性來實現這一點。 你的代碼應該是這樣的——

var path="path/to/video.mp4"; //you can get it by simple input tag with type=file or using electron dialogs
this.videoNode = document.querySelector('video');//it should be a video element in your html
this.videoNode.src=path;
this.videoNode.oncanplay=()=>{
  //do something...
}

這將處理完整的文件，並且您不需要禁用 webPreference，因為 videoNode 是 html 文件中的視頻元素。

你可以看看這個使用電子制作的開源媒體播放器項目

https://github.com/HemantKumar01/ElectronMediaPlayer

免責聲明：我是上述項目的所有者，並邀請大家為它做出貢獻