为什么要无边框四格播放器
以前做过监控产品的开发, 其中的视频客户端支持4格, 9格, 16格等多路视频, 刚好最近自学Electron, 于是想使用Electron编写一款简单的四格播放器. 想象一下, 同时看四个不同电影会不会很有趣呢?
功能上支持:
- 四格播放器, 田字排布, 均分宽高.
- 启动即载入上次播放的过的片子.
- 拖拽片子进到播放器, 拖入就高亮可拖拽区.
- 空白,暂停,播完时显示可拖拽区, 开播隐藏.
- 右上角最小化/最大化/关闭三按钮. 顶部无边框, 尽量不遮挡内容.
- 四周可拉伸宽高.
- 拖拽区增加open按钮.
- 使用rem来实现简单的响应式, 拉伸过程中拖拽区的大小和内部字体随着变化.
- 每格播放器支持单独的播放, 暂停, 播放进度条, 静音, 双击全屏等操作.
- 播放过程中播放控制条将自动隐藏, 避免遮挡节目内容.
配置环境
配置运行环境前, 需要本地安装node.js
// 安装electron
npm install create-electron-app -g
// 克隆或下载这个工程, 安装依赖
git clone [email protected]:gzx-miller/f-player.git
// 进入目录
npm install
// 测试
npm run debug
// 编译
npm run build
// 打包安装包
npm run make
在out目录中包含编译生成的文件和打包的安装包.
f-player.exe 的整个文件夹可拷贝到任意目录作为绿色版直接运行.
f-player-1.0.0 Setup.exe 可以作为安装包, 安装在电脑上.
开源代码地址:
[f-player](https://github.com/gzx-miller/f-player)
如果喜欢我的这个作品, 请不要吝啬您的star.
创建工程
npm install create-electron-app -g
create-electron-app my-app
新建窗口
const { BrowserWindow } = require('electron');
let win = new BrowserWindow({
backgroundColor: '#2e2c29',
width: 400, height: 320, // 定义窗口属性
parent: parent_win, modal: true, // 父窗口, 模态.
frame: false,
webPreferences: { nodeIntegration: true } // 这一项很关键, 5.0之后的版本, 不加这一项, require就不可用.
})
win.on('close', () => { win = null }) // 善后工作
win.loadURL(path.join('file://.../index.html')) // 也可加载线上链接
win.once('ready-to-show', () => { // 页面准备好了才show, 避免出现页面加载的过程.
win.show()
})
win.setIgnoreMouseEvents(true) // 让窗口忽略鼠标操作,
win.on('closed', () => { // 关闭
win = null
});
app.on('activate', () => { // 窗口激活
if (win === null) {
createWindow()
}
})
app.on('window-all-closed', () => { // 退出
app.quit() // quit会有通知before-quit, 关闭关闭各窗口后调用will-quit, exit则不会
})
win.webContents.openDevTools() // 打开调试工具
win.setProgressBar(0.5) // 任务栏的绿色进度条
当前元素拖拽当前窗口
<div style="
-webkit-user-select: none; // 关闭对页面的选取
-webkit-app-region: drag/no-drag; // 该元素 是 / 否 可拖拽当前窗口
"/>
窗口操作
win.maximize() // 最大化
win.unmaximize() // 取消最大化
win.isMaximized() // 是否最大化
win.minimize() // 最小化
win.restore() // 还原
win.isMinimized() // 是否最小化
参考:
Eletron官网: http://www.electronjs.org/