clappr--Open source web video player

Brazil's famous portal, globo.com (video player), uses OSMF-based flash components. In the recent years of development, Globo for the video platform has been added a number of additional features, such as: subtitles, ads, painting in the play and so on. However, due to the lack of dedicated teams for video platform maintenance, Flávioribeiro, one of the site's engineers, is increasingly feeling that the platform is lagging behind and struggling to cope with growing online access requirements. Especially this year, the second time the World Cup comes to the football kingdom, Globo will face a surge of replay hits. In view of this, Ribeiro and colleagues decided to upgrade the player. After conducting some validation tests, we decided to develop other plug-in functions based on CLAPPR.

CLAPPR is an open-source, extensible web video player that is easy to get started and extensible and has extensive documentation support. After the transformation, the video stream stack is replaced by HLS as RTMP, and the playback method adds HTML5 direct playback.

Globo before the revision of the playback screen

Add the CLAPPR plugin after the playback screen

　　CLAPPR Architecture:

Guided by component-based software engineering theory, the Ribeiro team listed the CLAPPR three main plugins:

1. Playback Plugin

Used to play a video resource. CLAPPR will traverse all the playback plugins until they find the plugin that will play correctly.

2. Container plug-in

Each playback is associated with a container. In most cases, a container matches a resource playback and is instantiated. Monitoring events include play/Stop, progress bar, watermark, and so on.

3. Core Plugins

This part of the plug-in carries the core control function. For example , the core plug-in can instantiate two containers and reduce the secondary window to play in the z-axis direction.

CLAPPR Architecture Diagram

　　External plugins

CLAPPR's plugin builder makes it easy for developers to create their own external plugins. Ribeiro uses it to create a BEMTV plug-in that enables peer-to statistics based on playback-container plugins. In addition, Globo also introduced some featured plugins, such as progress bar control, thumbnail browsing and so on.

　　Technical support

• Traceur: ECMAScript 6 code writing;
• Browserify: Modular loading, similar to Node's require () mode;
• Karma, Sinon, mocha function test;
• Gulpjs:: Front-end build tool (Create, upload, etc.).

In addition to the PC side, Globo is gradually perfecting the deployment of the mobile side, see iOS or anroid for more details.

Source: Flavioribeiro

clappr--Open source web video player