Vue-cli-plugin-electron-builder: production can not play local video

[starhu521]

Describe the bug
I'm using Vue cli 4 to build the project.I can not load and play the local video in production but development is fine.
And the video is mp4, I put it in assets folder.
Devtools shows like:

OR like this:


version:
electron: 9.0.5
vue-cli-plugin-electron-builder: 2.0.0-rc.2

Expected behavior
I hope to play video normal like image.

[andypotato]

I'm having the same issue with Electron 8 I had to downgrade to Electron 5 to get videos to work again.

Edit It made no difference putting the videos in the "public" or "assets" folder.

[starhu521]

I'm having the same issue with Electron 8 I had to downgrade to Electron 5 to get videos to work again.

_Edit_ It made no difference putting the videos in the "public" or "assets" folder.

Yes, and you also can use node stream pipe or change the protocol to file://. Just the custome protocol has the issue.

[nklayman]

I was able to play a video just by putting it in the public folder and then referencing it like so:

<video width="320" height="240" controls>
  <source src="vid.mp4" type="video/mp4" />
</video>

This was on electron v9. Can someone try this method and report if it works?

[azeranex]

@nklayman I tried it with electron 9.1.0 but it didn't work.

[nklayman]

@azeranex what version of this plugin did you use?

[azeranex]

@nklayman I'm using version 2.0.0-rc4.

[nklayman]

Hmm, could you create a demo repo and post a link here so that I can try it myself?

[azeranex]

Here it is https://github.com/azeranex/vue-cli-electron-video-demo

[andypotato]

I can reproduce the error with Electron 7, 8 and 9. Using Electron 6 or below it works just fine.

The version of the plugin does not matter, the error happens with both 1.4.6 and current 2.0.0-rc4.

[nklayman]

@azeranex thanks for the repo, I realized I was testing it on a project that used the file protocol enabled instead of app:// :facepalm:. I did find a solution though that works for app:// protocol:

// in background.js
app.on('ready', async () => {
  // Add this here:
  registerLocalVideoProtocol()

// And this anywhere:
function registerLocalVideoProtocol () {
  protocol.registerFileProtocol('local-video', (request, callback) => {
    const url = request.url.replace(/^local-video:\/\//, '')
    // Decode URL to prevent errors when loading filenames with UTF-8 chars or chars like "#"
    const decodedUrl = decodeURI(url) // Needed in case URL contains spaces
    try {
      // eslint-disable-next-line no-undef
      return callback(path.join(__static, decodedUrl))
    } catch (error) {
      console.error(
        'ERROR: registerLocalVideoProtocol: Could not get file path:',
        error
      )
    }
  })
}

Then, use src="local-video://vid.mp4". This works in both build and serve.

[azeranex]

Thanks, I confirm it's working. It can also replace createProtocol('app') and create "app" protocol with this method instead. So you don't need to create separated protocol anymore.

[starhu521]

@nklayman thanks a lot. But can we make the function of the custom app protocol the same as the file protocol?

[AMDZEN3]

I'm glad I found this, I was going crazy trying to figure out why videos wouldn't play from my public folder. Is this still the only solution though? This means I have to have special code to set the src for the video based on whether its electron or web. Its doable but not ideal.

[pat-flew]

I ran into a similar sounding issue where videos would not play over the app protocol in a distribution build.

Serving over a file protocol, or adding stream: true to the app protocol scheme privileges appears to have fixed it.