我的新輪子：eplayer，小而美的視訊播放器

132發表於2018-09-18
播放器

halo，大家好，我是yse，好久不見啦！ 嗯……閒著沒事兒再來發個文（guang）章（gao）

起因

應該有不少人知道，我今年暑假寫了新網站（clicli.us），不再是裡番網站，而是一家【視訊網站】

作為一家視訊網站，是需要視訊播放器來播放視訊的，我尋找了很久靠譜的視訊播放器，然後沒找到

這裡面有如 dplayer 這種大而全的，也有 ckplayer 這種 flash 的，還有不大不 flash 但是長得醜的，這都不是我需要的，我需要的是：能接入現代框架、輕量級（5kb-）、純 html5 、高顏值（統一）

所以最終，自己動手，豐衣足食~

然後我就寫了 eplayer，ep 也正好是番劇的縮寫，也算是巧合吧

使用

<div id=player></div>
複製程式碼
import Eplayer from 'eplayer'

const el = document.getElementById('player')
const ep = new Eplaer(this.$refs.player, {
    src: '001.m9u8',
    hls: true,
    themeColor: '#000' //必傳，強制統一UI配色
})
複製程式碼

然後

寫 eplayer 的時候，無疑最終就是本著上面提到的 feature 來寫 下面具體來說說 eplaeyr 的一些方面的解決方案：

接入現代框架

在接入現代框架之前，要知道現代框架到底和普通的 js 引用有什麼不一樣

  • 現代框架有自有的生命週期和鉤子

比如某個場景，當頁面銷燬時，記錄播放位置，然後存入 localstorage ，下次讀出來。這個功能在視訊播放場景中很常見 平時我們可能直接監聽頁面解除安裝了。

但是現代框架中只有元件，沒有頁面，比如 vue ，我們需要 beforeDestroy，react 需要 ComponentDidUnmount

ep 後面會對應不同框架，暴露不同的 api 或者，直接會發布兩個元件

輕量級

ep 很小，gzip 1kb，這對比 dplayer 的接近 30 kb，畢竟面向現代框架的 spa，肯定是越小越好

純 html5

ep 是一個純的 html5 播放器，我個人認為 flash 已經可以拜拜了 但是由於預設的 html5 的 video 標籤只支援 mp4，所以 ep 還預留了 hls、flv 的開關，用來決定是否引用第三方庫來完成對 m3u8、flv 的解析

高顏值

什麼 ui 算是高顏值，其實高顏值的 ui 不是特效多、動畫多，而是足夠統一 ep 初始化的時候會強制傳一個色值，這個色值是對應你們網站配色的，可以保證完美適配任何網站配色

同時，ep 的動畫都是純 css 寫的，嗯………我向來都是 css 閉眼寫

移動端相容

這是個無比尷尬的事情，播放器對移動端相容，真的很困難，為什麼？

因為無論是 ios 還是 android ，不同的瀏覽器都會對 video 進行重畫 UI

尤其是國產的亂七雜八的瀏覽器，根本無法控制

幾乎所有的播放器，dp、ck 都沒能做到

ep 的做法是，移動端會將 video 畫到 canvas 上，這樣可以不被瀏覽器識別並重新繪製 UI，但是 canvas 也有很多問題，比如效能和清晰度無法同時達到最佳

所以 pc 端並沒有採用這種保守的策略

TO DO……

  • 中介軟體機制

和 dplayer 不同，ep 為了保持足夠小，不會一把梭，把所有的功能都實現 ep 主庫只保留和 video 相關的 api 剩下的，比如彈幕、截圖、評論，都準備以中介軟體的形式接入，比如這個樣子：

import Eplayer from 'eplayer'
import danmu from 'danmu'
    
const ep = new Eplaer(this.$refs.player, {
    src: '001.mp4',
    themeColor: '#000'
})
    
ep.use(danmu)   
複製程式碼
  • 程式碼去狂野化 現在 ep 的程式碼實現太亂了，需要重構下::>_<::

總結

官網：eplayer.js.org

github：github.com/132yse/epla…

clicli 演示 ( vue )：www.clicli.us/p/82

看在我這麼努力寫文章的份兒上！

歡迎試用與 star ！

相關文章