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

问题描述

我正在开发一个视频播放器应用程序，该应用程序使用node.js和electronic播放本地文件系统中的视频(.mp4)(因此，我使用的是chrome5的html5视频播放器).

I am developing a video player application, which plays video videos (.mp4) from the local filesystem using node.js and electron (therefore I am using chromium's html5 video player).

播放当前大于2GB的视频似乎是我目前的问题.

Playing video videos larger than 2GB seems to be a problem with my current approach.

我曾经使用fs.readFileSync读取本地视频文件，并将该Blob传递给视频播放器，如以下代码所示:

I used to read the local video files using fs.readFileSync and pass that Blob to the video player, like in this code:

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的文件会触发以下错误:

This does work for video files smaller that 2GB. Files larger than 2GB trigger the following error:

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视频播放器.不幸的是，我找不到任何有关如何将此流传递到视频播放器的文档.

I believe the solution is to pass a ReadStream to the html5 video player using fs.readStream(). Unfortunately I cannot find any documentation on how to pass this stream to the video player.

推荐答案

正如本主题所述，您正在使用电子，从上面的评论中可以明显看出，您正在避开服务器.看来，如果您只是创建一个脱机视频播放器，那么您会使事情变得复杂.为什么要创建一个缓冲区然后创建一个新的URL?您可以通过简单地获取视频路径并将其用作视频对象的src属性来实现此目的.您的代码应如下所示:

As the topic says you are using electron and from the above comments it is clear that you are avoiding a server. It seems that if you are just creating an offline video player then you are just making things complex. Why are you creating a buffer and then creating a new url? You can achieve this by simply getting the video path and using it as src attribute of video object.Your code should look like this-

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...
}

这将处理完整的文件，并且鉴于videoNode是html文件中的视频元素，因此您无需禁用webPreference.

This will handle complete file and you dont need to disable webPreference given that videoNode is the video element in html file.

您可以看一下使用电子技术制作的这个开源媒体播放器项目-

You can take a look at this open source media player project made using electron-

https://github.com/HemantKumar01/ElectronMediaPlayer

免责声明:我是上述项目的所有者，并邀请所有人为该项目做出贡献

Disclaimer: i am the owner of the above project and everyone is invited to contribute to it

这篇关于使用node.js fs.readStream()在electronic html5视频播放器中播放本地视频文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！