Play local video file in electron html5 video player using node.js fs.readStream()

问题

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

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

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;

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)

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.

回答1:

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

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

来源：https://stackoverflow.com/questions/57009575/play-local-video-file-in-electron-html5-video-player-using-node-js-fs-readstream

标签

javascript

node.js

electron