Electron播放本地视频报错解决办法（CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED）

如上图所示，错误信息：

VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) The media could not be loaded, either because the server or network failed or because the format is not supported.

当我们播放网络视频时没问题，但是当播放本地视频时会报上图的错误，错误的大概意思是：没有找到与此媒体兼容的源。

分析原因

浏览器为了安全考虑，在web页面进行文件加载时，是禁用了file://协议进行文件展示的，一般来说要想获取本地文件展示，得让用户进行input file选择，获取File对象，正好我们的家在方式就是 file:// 方式。

videoOptions: {
  sources: [
    {
      src: "file:///Users/wangkai/Downloads/mkv/test.mkv",
      type: "video/mp4",
    }
  ]
}

我们需要对这个本地路径进行处理，让其不通过file://协议加载，那么如何实现呢？

解决办法

我们可以通过 electron 的 protocol模块来注册自定义协议并拦截现有协议请求。

首先我们修改一下 videoOptions 配置文件，将 file:// 修改为 atom:// 自定义协议。

videoOptions: {
  sources: [
    {
      src: "atom:///Users/wangkai/Downloads/mkv/test.mkv",
      type: "video/mp4",
    }
  ]
}

接着我们可以通过 electron 的 protocol模块来注册自定义协议并拦截现有协议请求，比如我们实现一个 atom:// 协议加载视频进行播放：

const path = require('path')
const { app, protocol} = require('electron');
...
app.whenReady().then(() => {
     protocol.registerFileProtocol('atom', (request, callback) => {
       const url = request.url.substr(7)
       console.log("electronAppReady-------------------------============>atom url", decodeURI(path.normalize(url)))
       callback(decodeURI(path.normalize(url)))
     })
   })

//log: electronAppReady-------------------------============>atom url /Users/xxx/Downloads/mkv/500 世间始终你好 - 罗文 甄妮.mkv

解释：protocol.registerFileProtocol 的作用是：拦截自定义协议的请求回调，重新处理后再请求路径。每次播相应的使用都会执行该方法.

问题即可解决！