需求：打开窗口 (加载本地的html页面) 并播放视频资源
环境
electron 28.1.3 + electron-forge 7.2.0
思路：因为要加载新弹出一个窗口并播放资源，可以自己加载一个外部的页面或者加载一个本地的页面，使用本地的会好些。让electron-forge在打包时额外加载一个html文件到项目中。
参考资料
代码
forge.config.ts （打包配置代码）
const config: ForgeConfig = {packagerConfig: {// 指定新增html资源配置extraResource:["./lib"]},rebuildConfig: {},makers: [new MakerSquirrel({}), new MakerZIP({}, ['darwin']), new MakerRpm({}), new MakerDeb({})],plugins: [new VitePlugin({// `build` can specify multiple entry builds, which can be Main process, Preload scripts, Worker process, etc.// If you are familiar with Vite configuration, it will look really familiar.build: [{// `entry` is just an alias for `build.lib.entry` in the corresponding file of `config`.entry: 'src/main.ts',config: 'vite.main.config.ts',},{entry: 'src/preload.ts',config: 'vite.preload.config.ts',},{entry: 'src/renderer_order.js',config: 'vite.preload.config.ts',},],renderer: [{name: 'main_window',config: 'vite.renderer.config.ts',},],}),],
};
video.html (在项目路径下新增 lib目录中)
<!DOCTYPE html>
<html>
<head><title>Video Player</title>
</head>
<body style="margin: 0; padding: 0;"><video src="" controls autoplay style="width: 100%; height: 100vh;"></video>
</body><script>document.addEventListener('DOMContentLoaded', function() {// 获取 URL 查询参数const queryParams = new URLSearchParams(window.location.search);// 获取参数值const param1Value = queryParams.get('videoUrl');// 在控制台打印参数值console.log('videoUrl', param1Value);const video = document.querySelector('body > video')video.src = param1Value; // 设置视频文件的路径});
</script>
</html>
main.ts（调用代码）
// 显示视频窗口
const videvWinow =(videoUrl:string)=>{//videoUrl 为视频资源路径const { width, height } = screen.getPrimaryDisplay().workAreaSizeconst floatingWindow = new BrowserWindow({width: 800,height: 550,// alwaysOnTop: true, // 设置为总是在顶部// frame: false, // 去掉窗口边框// transparent: true, // 设置为透明resizable: true, // 设置为不可调整大小webPreferences: {preload: path.join(__dirname, 'preload.js'),nodeIntegration:true,webSecurity: false,webviewTag:true},});// 调整窗口的位置，x,y为坐标// floatingWindow.setPosition(x, y)// 设置窗口位置// const mainScreen = screen.getPrimaryDisplay();// const { width, height } = mainScreen.workAreaSize;// const x = width / 2 - 400; // 窗口宽度的一半// const y = height / 2 - 300; // 窗口高度的一半floatingWindow.setPosition(0, 10);// 打开视频页面调试// floatingWindow.webContents.openDevTools();const queryParams = {'videoUrl': videoUrl};const queryStr = new url.URLSearchParams(queryParams).toString();let videoHTML = '/lib/video.html'if(MAIN_WINDOW_VITE_DEV_SERVER_URL){// 测试环境路径videoHTML = '/lib/video.html'}else{// 正式环境路径videoHTML = '/resources/lib/video.html'}const fileUrl = url.format({pathname: path.join(process.cwd(), videoHTML),search: queryStr});floatingWindow.loadURL(fileUrl);
}
)
)
