Electron学习笔记(六) 实现四格多片源播放器_electron vite 视频播放-CSDN博客

Electron学习笔记(五) 通过Addon(n-api)实现可扩展接口

为什么要无边框四格播放器

以前做过监控产品的开发, 其中的视频客户端支持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 可以作为安装包, 安装在电脑上.

开源代码地址:

[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()   // 是否最小化