基於Electron的四格多片源播放器

爲什麼要無邊框四格播放器

以前做過監控產品的開發, 其中的視頻客戶端支持4格, 9格, 16格等多路視頻, 剛好最近自學Electron, 於是想使用Electron編寫一款簡單的四格播放器. 想象一下, 同時看四個不同電影會不會很有趣呢? 

功能上支持:

 

1.  四格播放器, 田字排布, 均分寬高.
2.  啓動即載入上次播放的過的片子.
3.  拖拽片子進到播放器, 拖入就高亮可拖拽區.
4.  空白,暫停,播完時顯示可拖拽區, 開播隱藏.
5.  右上角最小化/最大化/關閉三按鈕. 頂部無邊框, 儘量不遮擋內容.
6.  四周可拉伸寬高.
7.  拖拽區增加open按鈕.
8.  使用rem來實現簡單的響應式, 拉伸過程中拖拽區的大小和內部字體隨着變化.
9.  每格播放器支持單獨的播放, 暫停, 播放進度條, 靜音, 雙擊全屏等操作.
10.  播放過程中播放控制條將自動隱藏, 避免遮擋節目內容.

 

配置環境

配置運行環境前, 需要本地安裝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/