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