Electron load remote URL and load local file

Question

I have a video installation for an art exhibition with big videos (several GBs) and a online hosted webapp.

Since I want to save some bandwith during the exhibition, I would like to package the videos into an electron app, load the webpage once during startup and load the videos from the local filesystem / packaged electron app.

I've already achieved to disable the webSecurity (it's fine, no one beside me runs this application) and I already get the error message in the JS console

GET file:///idle.mp4 net::ERR_FILE_NOT_FOUND .

I cannot find the right path/folder to reference the local file, do you have a hint for me? I can't use a fixed/absolute filepath, since the onlineserver has no knowledge about the local filepath..

I tried to put the video files into the main and renderer folders, but it doesn't work out and only shows the error message above. Thank you!

Currently I'm referencing the videos like this in my webapp:

<video id="id12">
  <source src="file:///ship.mp4" type="video/mp4"></source>
</video>

My folder structure looks like following:

Answer 1

I found the solution by myself, I just had to create a fileProtocol interceptor in my electron app:

function createMainWindow() {

  protocol.interceptFileProtocol('file', function(req, callback) {
    var url = req.url.substr(7);
    callback({path: path.normalize(__dirname + url)})
  },function (error) {
    if (error)
      console.error('Failed to register protocol')
  })
...