哥们，太懂你这种找遍老例子都不好使的憋屈了！Electron这几年API更新不少，5年前的代码大概率已经跟不上现在的安全规则了。我帮你梳理下问题根源和正确的解决方法：

问题出在哪？ #

你之前碰到的两个核心问题：

1. 直接用本地文件路径失效：Electron默认开启webSecurity时，出于安全限制，渲染进程里的<video>标签不能直接加载file://协议的本地文件，所以你拿到files[0].path直接用会失效。
2. 自定义协议无限循环：你之前写的protocol.handle里，返回的还是media-loader://开头的地址，这会让Electron不断触发这个协议的处理器，导致无限打印日志，自然也加载不了视频。

正确的实现步骤（生产环境安全版） #

1. 主进程配置自定义协议

首先在主进程里注册一个安全的自定义协议，把请求转发到真实的本地文件路径，避免循环：

const { app, protocol, net } = require('electron');
const path = require('path');

app.whenReady().then(() => {
  // 先把自定义协议标记为安全、标准协议，避免被安全策略拦截
  protocol.registerSchemesAsPrivileged([
    { scheme: 'media-loader', privileges: { secure: true, standard: true } }
  ]);

  // 处理自定义协议请求
  protocol.handle('media-loader', async (request) => {
    // 去掉协议前缀，拿到本地文件的真实路径
    const localFilePath = request.url.replace('media-loader://', '');
    // 把本地路径转换成标准的file://格式（自动处理Windows路径的斜杠问题）
    const fileUrl = path.toFileURL(localFilePath).href;
    // 转发请求到本地文件
    return net.fetch(fileUrl);
  });
});

2. 渲染进程处理文件选择与视频加载

在渲染页面里，获取用户选择的文件后，给路径加上自定义协议前缀再传给<video>标签：

<input type="file" id="video-input" accept="video/*" />
<video id="video-player" controls style="width: 100%;"></video>

<script>
  const fileInput = document.getElementById('video-input');
  const videoPlayer = document.getElementById('video-player');

  fileInput.addEventListener('change', (e) => {
    const selectedFile = e.target.files[0];
    if (!selectedFile) return;

    // 给本地文件路径加上自定义协议前缀
    const videoSourceUrl = `media-loader://${selectedFile.path}`;
    
    // 更新视频源
    const sourceElement = document.createElement('source');
    sourceElement.src = videoSourceUrl;
    sourceElement.type = `video/${selectedFile.name.split('.').pop()}`; // 动态匹配视频格式
    
    videoPlayer.innerHTML = '';
    videoPlayer.appendChild(sourceElement);
    videoPlayer.load();
  });
</script>

3. 窗口配置保持安全设置

创建BrowserWindow时，保持webSecurity开启（这是生产环境的安全最佳实践）：

const { BrowserWindow } = require('electron');

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      webSecurity: true, // 必须开启，保障安全
      contextIsolation: true, // 推荐开启，隔离渲染进程与主进程
      nodeIntegration: false // 不建议开启，避免安全风险
    }
  });

  mainWindow.loadFile('index.html');
}

为什么之前webSecurity=false能行？ #

关闭webSecurity会绕过Electron的安全限制，允许渲染进程直接访问file://路径，但这相当于打开了安全漏洞，容易被恶意脚本利用，绝对不能在生产环境使用！

额外注意点 #

• 如果你用的是Electron 18+，protocol.handle是推荐的API，旧的protocol.registerFileProtocol已经被标记为过时了。
• 记得处理不同视频格式的type属性，避免部分格式无法加载。

备注：内容来源于stack exchange，提问作者jonnyT