Clappr——开源的Web视频播放器

 

巴西著名的门户网站Globo.com（视 频播放器），使用的是基于OSMF的Flash组件。在最近几年的发展过程当中，Globo为视频平台陆续添加了很多额外功能，例如： 字幕，广告，画中画播放等。然而，因为缺少针对视频平台进行维护的专门小组，网站工程师之一的FlávioRibeiro愈来愈感受这个平台落后和难以应 付不断增加的在线访问需求了。特别是今年，世界杯第二次来到足球王国，Globo将面临的是激增的赛事回放点击。有鉴于此，Ribeiro与同事们决定对 播放器进行升级改造。在进行一番验证测试后，决定以Clappr为基础再进行其它插件功能开发。

　　Clappr是一款开源可扩展的Web视频播放器，容易上手和进行扩展而且有丰富的文档支持。改造后，视频流堆栈由HLS替代为RTMP，回放方式新增了HTML5直接播放。

Globo改版前的播放画面 

Clappr架构：

　　以基于组件的软件工程理论为指导，Ribeiro团队列出了Clappr三个主要的插件：

　　1.  回放插件

　　用于播放某个视频资源。Clappr会遍历全部的回放插件直至找到能正确播放的插件。

　　2.  容器插件

　　每一个回放都与一个容器关联。多数状况下一个容器与一个资源回放匹配并被实例化。监听事件包括播放/中止，进度条，水印等等。

　　3.  核心插件

　　该部分插件承载了核心控制功能。例如画中画功能，核心插件可以实例化两个容器，在Z轴方向把次要窗口缩小播放。

　外部插件

　　Clappr的插件生成器可以让开发者很是方便地建立本身的外部插件。Ribeiro利用它建立了BemTV插件，实现了基于回放-容器插件的P2P统计功能。此外，Globo还推出了部分特点插件，例如进度条控制，缩略图浏览等等。

　　技术支持

• Traceur：进行EcmaScript 6代码编写；
• Browserify：进行模块化加载，相似于node的require()方式；
• Karma、Sinon、Mocha功能测试；
• Gulpjs:：前端构建工具(建立，上传等等)。