I’m building a Electron app using vue.js.
I’d like to play videos in my app stored on my local filesystem.
I’ve seen several answers to this problem here on SO, but none of them work for me.
Of course, I tried to disable webSecurity, but that didn’t help. I created the app using vue-electron-builder.

I’m able to display local images using a custom protocol:

In my background.js:

app.on('ready', async () => {
    
    ...
    
    protocol.handle('safe-file', (request) => {
        return net.fetch(request.url.replace('safe-file://', 'file://'))
    })


})

And then I can generate a path to my image using this method:

toSafeUrl(filePath) {
    let path = filePath.replace(/\/g, '/'); // Replace backslashes with forward slashes
    if (path.match(/^[a-zA-Z]://)) { // For Windows paths
        path = '/' + path;
    }
    return encodeURI('safe-file://' + path);
}

This way I can grab a local image and I get a custom path, which I can display without issues:

<img src="safe-file:///D:/IMAGES/image.JPG" width="300" height="300" />

I tried to do the same for a video file, but unfortunately it doesn’t display anything.
Tried it with native tag, Plyr player, Video.js but none of them was able to play the video.

Am I missing something?

Video placed in the public folder and also a video from a http/https source is playing fine.