Motivated by Leandro, today I'm gonna write a bit about Clappr, an open source media player for the web. If you're Brazilian or know portuguese, there's also some useful information at Thiago's talk. Actually, I will inadvertently and explicitly steal some data from it.
History
During the last 4 years at Globo.com there was no team focused specifically on the development of the video player. It was a monolithic flash component based on OSMF, mainly designed for playing progressive download videos on on-demand scenarios and also cover live streams through RTMP protocol.
At the beginning things were good, but in the course of time, a lot of new features were added (like support for subtitles, advertisement, DRM, new streaming protocols, picture-in-picture, etc). Since there wasn't an official owner of the project and maintenance programming is a dirty work, we were building a wall with crooked bricks. Player tasks started to be faced with revulsion and pain.
As the FIFA World Cup 2014 project came with a bunch of new requirements and knowing that our live video streaming stack was rebuilt (HLS in favor of RTMP), we decided to go against Joel and bootstrap a brand new video player in order to support the requirements and improve the overall performance on serving the matches and upcoming transmissions. The idea was to favor the playback directly on html5 (with fallback to flash when necessary).
Open Source
At Globo.com we use hundreds of open source projects and when starting a project from scratch, we usually ask ourselves Why not open source it?. First, there's the motto of give something back to the community, but I personally believe that committing and pushing on Github, put your code available to the world and maybe build a community around your baby acts like a fuel for your brain, pushes you to the limits of productivity.
Open source software acts like a fuel for your brain, pushes you to the limits of productivity.
Since we are in times where video delivery is very heterogeneous between browsers and devices, we choose for a plug-ins based architecture, allowing us to provide almost everything as open source, except the components that interact with our internal infrastructure.
Visit Globo.com Open Source to see more open source projects maintained by my co-workers.
Clappr Architecture
With CBSE in mind we could figure out that there were three different plug-in types:
Playback Plugins: Responsible for playing a given source. When embedded, Clappr will search through playback plugins until find one who canPlay() the source.
Container Plugins: Every playback is associated with a container. In most cases, only one container and a playback will be instantiated. It is inside containers that, guess what, the container plugins work. Some examples are the built-in stats plugin that listen for playback events (buffering, bufferfull, play/pause, etc), the spinner and the watermark.
Core Plugins: These are the ones who control everything. Let's say you want two videos playing at the same time, the main one and one smaller at the corner, like a picture-in-picture. A core plugin is able to instantiate two containers with a playback plugin each, set the size of the secondary video and put it on a bigger z-index.
There's also a bunch of built-in components, like the Mediator who is responsible for routing events between scopes (and even make the Flash ↔ JS bridge when necessary) and the Loader who manage to load all built-in and external plugins. Wat? External plugins?
External Plug-ins
It's not only possible but simple to create your own external plug-in. There's a Clappr Plug-ins Generator that will ask you the kind of plug-in you want to create and build the structure for you. I've used it to create BemTV plugins, the playback and a container plugin to show peer-to-peer statistics. Globo.com has some proprietary plug-ins such as media control bar, thumb-on-seek and others.
Technology
- Traceur: write code in EcmaScript 6
- Browserify: create the bundle, require()
- Karma, Sinon, Mocha: tests
- Gulpjs: tasks (build, upload, etc)
Current Status
Clappr already supports the mainstream formats and has some special features like DVR (travel in time on live streams). We're heading to 1.0.0 release, but first we need to create a decent documentation and landing page. Both are on the go.
We tought that the architecture was so solid that it motivated us to bootstrap mobile versions of Clappr. We already created iOS and Android repositories in case you want to follow our future progress.
Contributing
We are just three commiters, but there are some easy issues opened. If you felt encouraged in contributing, I'll be more than glad to help you. You can find us at clappr discussion list and I'm always online as flavioribeiro at freenode.