Skip to content

Architecture

Jump to bottom
Bruno Torres edited this page Jun 24, 2018 · 3 revisions

Clappr is an extensible, open source, plugin oriented, html5-first media player for web and mobile. It can play, among others formats: hls, dash, ogg, webm, mp4, rtmp either live or video on demand.

One of its strongest features is the ability to extend it with plugins, there are at least two main ways of doing this:

  • extending its components with inline javascript
  • creating an external plugin

But before we start to create these plugins, we should understand the basics behind Clappr's architecture. It was designed around these main components:

  • Player - the public api and entry point for the clients.
  • Core - it is really the player's core, almost all components are created and managed here. Usually the player will talk with other components through core.
  • MediaControl - it controls all the user interaction between ui and the playback, it relies only on playback abstraction therefore this component should work in any playback (hls, dash, rtmp, mp4...)
  • Container - a wrapper around the playback, sometimes it can be seen as just as a delegator, but you can use it to build some plugins that can be agnostic of playback's kind.
  • Playback - an abstraction that actually plays the media, it might use: video tag, MSE and flash to achieve this.

alt

And you can create plugins around these abstractions, here's the kinds of plugins you can do:

  • CorePlugin - you can access/modify all the components of the player (ex: getting user statistics)
  • UICorePlugin - the same as CorePlugin, but rendering user interface elements, like Chromecast and Thumbnails
  • ContainerPlugin - you access/modify a playback, controlling it (ex: speech control) or changing its behavior.
  • UIContainerPlugin - the same as ContainerPlugin, but with user interface elements (ex: banners, watermark)
  • Playback - although it's more of module than a plugin, you can provide a playback for (ex: 360 degrees video, Dash)
  • MediaControl - you can provide your own controls for the player.

To summarize Clappr is aiming to:

  • keep open to extensibility: you can create an entire plugin in a different repository, you can disable it, you can create a new playback that is able to work with the old media control and existent plugins.
  • use mainly events to communicate with components: which makes your program less coupling in your plugin level... you don't need to call a function, you can listen to events and trigger events.
  • have a minimal footprint: You can add the plugins you need, for instance you don't need to load chromecast when you don't need it.
Clone this wiki locally