需求：打开窗口 (加载本地的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().workAreaSize
const 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);
}