为什么要无边框四格播放器
以前做过监控产品的开发, 其中的视频客户端支持4格, 9格, 16格等多路视频, 刚好最近自学Electron, 于是想使用Electron编写一款简单的四格播放器. 想象一下, 同时看四个不同电影会不会很有趣呢?
功能上支持:
- 四格播放器, 田字排布, 均分宽高.
- 启动即载入上次播放的过的片子.
- 拖拽片子进到播放器, 拖入就高亮可拖拽区.
- 空白,暂停,播完时显示可拖拽区, 开播隐藏.
- 右上角最小化/最大化/关闭三按钮. 顶部无边框, 尽量不遮挡内容.
- 四周可拉伸宽高.
- 拖拽区增加open按钮.
- 使用rem来实现简单的响应式, 拉伸过程中拖拽区的大小和内部字体随着变化.
- 每格播放器支持单独的播放, 暂停, 播放进度条, 静音, 双击全屏等操作.
- 播放过程中播放控制条将自动隐藏, 避免遮挡节目内容.
配置环境
配置运行环境前, 需要本地安装node.js
// 安装electron
npm install create-electron-app -g
// 克隆或下载这个工程, 安装依赖
git clone git@github.com: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 可以作为安装包, 安装在电脑上.
开源代码地址:
如果喜欢我的这个作品, 请不要吝啬您的star.
参考:
Eletron官网: www.electronjs.org/
