Clappr——開源的Web視頻播放器,clappr開源web
巴西著名的門戶網站Globo.com(視頻播放器),使用的是基於OSMF的Flash組件。在最近幾年的發展過程中,Globo為視頻平台陸續添加了不少額外功能,例如: 字幕,廣告,畫中畫播放等。然而,由於缺乏針對視頻平台進行維護的專門小組,網站工程師之一的FlávioRibeiro越來越感覺這個平台落後和難以應付不斷增長的線上訪問需求了。特別是今年,世界盃第二次來到足球王國,Globo將面臨的是激增的賽事回放點擊。有鑒於此,Ribeiro與同事們決定對播放器進行升級改造。在進行一番驗證測試後,決定以Clappr為基礎再進行其它外掛程式功能開發。
Clappr是一款開源可擴充的Web視頻播放器,容易上手和進行擴充並且有豐富的文檔支援。改造後,視頻流堆棧由HLS替代為RTMP,回放方式新增了HTML5直接播放。
Globo改版前的播放畫面
增加Clappr外掛程式後的播放畫面
Clappr架構:
以基於組件的軟體工程理論為指導,Ribeiro團隊列出了Clappr三個主要的外掛程式:
1. 回放外掛程式
用於播放某個視頻資源。Clappr會遍曆所有的回放外掛程式直至找到能正確播放的外掛程式。
2. 容器外掛程式
每個回放都與一個容器關聯。多數情況下一個容器與一個資源回放匹配並被執行個體化。監聽事件包括播放/停止,進度條,浮水印等等。
3. 核心外掛程式
該部分外掛程式承載了核心控制功能。例如畫中畫功能,核心外掛程式能夠執行個體化兩個容器,在Z軸方向把次要視窗縮小播放。
Clappr架構圖
外部外掛程式
Clappr的外掛程式產生器能夠讓開發人員非常方便地建立自己的外部外掛程式。Ribeiro利用它建立了BemTV外掛程式,實現了基於回放-容器外掛程式的P2P統計功能。此外,Globo還推出了部分特色外掛程式,例如進度條控制,縮圖瀏覽等等。
支援人員
- Traceur:進行EcmaScript 6代碼編寫;
- Browserify:進行模組化載入,類似於node的require()方式;
- Karma、Sinon、Mocha功能測試;
- Gulpjs::前端構建工具(建立,上傳等等)。
除了PC端,Globo正逐步完善移動端的部署,具體請查閱iOS或Anroid。
原文出自:Flavioribeiro