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

超、凢脫俗 2022-08-04 16:54 440阅读 0赞

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

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

[![094856j5kg3flkzf5kk48l.jpg][]][094856j5kg3flkzf5kk48l.jpg]

Globo改版前的播放画面

[![094839fjujc8wm3lj4lggm.jpg][]][094839fjujc8wm3lj4lggm.jpg]

增加Clappr插件后的播放画面

Clappr架构：

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

1.  [回放插件][Link 2]

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

2.  [容器插件][Link 3]

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

3.  [核心插件][Link 3]

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

[![094722yjiolzbbqt4qqj9z.jpg][]][094722yjiolzbbqt4qqj9z.jpg]

Clappr架构图

外部插件

Clappr的插件生成器能够让开发者非常方便地创建自己的外部插件。Ribeiro利用它创建了BemTV插件，实现了基于回放-容器插件的P2P统计功能。此外，Globo还推出了部分特色插件，例如进度条控制，缩略图浏览等等。

技术支持

*  [Traceur][]：进行EcmaScript 6代码编写；
 *  [Browserify][]：进行模块化加载，类似于node的require()方式；
 *  [Karma][]、[Sinon][]、[Mocha][]功能测试；
 *  [Gulpjs][]:：前端构建工具(创建，上传等等)。
 *  除了PC端，Globo正逐步完善移动端的部署，具体请查阅[iOS][]或[Anroid][]。

[Link 1]: http://www.html5cn.org/
[Globo.com]: http://leandromoreira.com.br/
[094856j5kg3flkzf5kk48l.jpg]: http://www.html5cn.org/data/attachment/portal/201412/01/094856j5kg3flkzf5kk48l.jpg
[094839fjujc8wm3lj4lggm.jpg]: http://www.html5cn.org/data/attachment/portal/201412/01/094839fjujc8wm3lj4lggm.jpg
[Link 2]: https://github.com/globocom/clappr/tree/master/src/playbacks
[Link 3]: https://github.com/globocom/clappr/tree/master/src/plugins
[094722yjiolzbbqt4qqj9z.jpg]: http://www.html5cn.org/data/attachment/portal/201412/01/094722yjiolzbbqt4qqj9z.jpg
[Traceur]: https://github.com/google/traceur-compiler
[Browserify]: http://browserify.org/
[Karma]: http://blog.flavioribeiro.com/clappr-an-extensible-media-player-for-the-web/karma-runner.github.io
[Sinon]: http://sinonjs.org/
[Mocha]: http://mochajs.org/
[Gulpjs]: http://gulpjs.com/
[iOS]: http://github.com/globocom/clappr-ios
[Anroid]: http://github.com/globocom/clappr-android