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