使用 node.js fs.readStream() 在电子 html5 视频播放器中播放本地视频文件答案

【问题标题】：Play local video file in electron html5 video player using node.js fs.readStream()使用 node.js fs.readStream() 在电子 html5 视频播放器中播放本地视频文件
【发布时间】：2019-11-22 09:00:40
【问题描述】：

我正在开发一个视频播放器应用程序，它使用 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 视频播放器。不幸的是，我找不到任何关于如何将此流传递给视频播放器的文档。

【问题讨论】：

见：medium.com/better-programming/…
@Terry 我正在寻找一种将文件（在本地文件系统中可用）直接传递给视频播放器的方法。如果可能，我想避免创建 http-server。
您为什么使用fileStream 而不仅仅是链接到视频？我使用video.js 播放本地视频，效果很好。如果您愿意，我可以发布代码。
@NoGrabbing 这似乎在第一次尝试时有效（使用一个小视频文件），但它需要在 Electron 中禁用 webSecurity，这可能是一个安全问题。
我想知道使用流是否是由于文件大小。我不知道链接是否意味着将整个文件加载到内存中。回复：安全——是的，我猜。我在；他们在我的应用程序中使用本地内容，所以这不是问题。祝你好运！

标签： javascript node.js electron

【解决方案1】：

正如主题所说，您正在使用电子，并且从上面的 cmets 很明显，您正在避免使用服务器。似乎如果您只是创建一个离线视频播放器，那么您只是让事情变得复杂。你为什么要创建一个缓冲区，然后创建一个新的 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

免责声明：我是上述项目的所有者，欢迎大家为它做出贡献

【讨论】：