Clappr-plugins is part of Clappr project that contains the main builtins plugins of the Clappr Player.
Clappr is under development but production-ready. Feel free to open issues and send us pull requests.
This project exports individually and as a single object (Plugins) the builtins plugins to create the Clappr Player. Those plugins are:
- MediaControl
- ClickToPausePlugin
- ClosedCaptions
- DVRControls
- ErrorScreen
- GoogleAnalytics
- PosterPlugin
- SeekTime
- SpinnerThreeBouncePlugin
- StatsPlugin
- WaterMarkPlugin
- EndVideo
- Favicon
A plugin can add new capabilities to Clappr or extend an existing one. A plugin can also be either visual (change or add some behavior in the user interface) or internal, collecting data from the video that is playing, for example.
The plugins are organized into categories that define their responsibility and level of permission to access the internal components of the player. For more information, see the section about plugin types.
A plugin can be loaded within an internal permission level (scope) of the Player and must extend some base type supported by Clappr.
The scopes are: Core, Container and Playback. To learn more about the Clappr architecture, visit: https://github.com/clappr/clappr/wiki/Architecture
Following the classes that a plugin can extend, this will define its type and structure.
Plugins that do not handle UI, can extend from: CorePlugin, ContainerPlugin or Playback.
Plugins that need to manipulate the UI must extend from: UICorePlugin or UIContainerPlugin.
The plugin has full access to the player, being able to access all events and internal data or manage and/or create an internal layer (Container for example).
Examples: MediaControl, ClosedCaptions, EndVideo, and others.
| Methods | Description |
|---|---|
| bindEvents | A method called in the constructor where listeners for the desired events must be created. |
| enable | Method to activate the plugin. The default implementation calls the bindEvents method and changes the value of the this.enabled flag to true if the plugin is disabled. |
| disable | Method to disable the plugin. The default implementation removes existing listeners and changes the value of the this.enabled flag to false if the plugin is enabled. |
| destroy | A method that destroys the plugin's listeners. |
| Methods | Description |
|---|---|
| bindEvents | A method called in the constructor where listeners for the desired events must be created. |
| enable | Method to activate the plugin. The default implementation calls the bindEvents method, changes the value of the this.enabled flag to true and leaves the plugin visible in the Player if it's disabled. |
| disable | Method to disable the plugin. The default implementation removes existing listeners, changes the value of the this.enabled flag to false and hides the plugin in the player if it's enabled. |
| render | A method called in the constructor of the base class where the element that will be rendered in the player must be filled out. |
| destroy | A method that removes the plugin of the DOM. |
The plugin has control only within the scope of the media.
Examples: SpinnerThreeBounce, WaterMark, Stats and others.
| Métodos | Description |
|---|---|
| bindEvents | A method called in the constructor where listeners for the desired events must be created. |
| enable | Method to activate the plugin. The default implementation calls the bindEvents method and changes the value of the this.enabled flag to true if the plugin is disabled. |
| disable | Method to disable the plugin. The default implementation removes existing listeners, changes the value of the this.enabled flag to false and hides the plugin in the player if it's enabled. |
| destroy | A method that destroys the plugin's listeners. |
| Métodos | Description |
|---|---|
| bindEvents | A method called in the constructor where listeners for the desired events must be created. |
| enable | Method to activate the plugin. The default implementation calls the bindEvents method, changes the value of the this.enabled flag to true and leaves the plugin visible in the Player if it's disabled. |
| disable | Method to disable the plugin. The default implementation removes existing listeners, changes the value of the this.enabled flag to false and hides the plugin in the player if it's enabled. |
| render | A method called in the constructor of the base class where the element that will be rendered in the player must be filled out. |
| destroy | A method that removes the plugin of the DOM. |
Controls execution and adds support for different types of media. Since playback plugins are intended to support a specific type of media, the plugin is extended from some other existing playback plugin or the base playback class.
More information about the Playback base class in the Clappr-core repository: https://github.com/clappr/clappr-core/blob/master/src/base/playback/playback.js
Exemplos: HlsPlayback, DashShakaPlayback, HTML5Video and others.
A plugin that renders the interface over the video container and add the possibility to control playback actions (play, pause, stop).
Adds the possibility to toggle between the play/pause playback states by clicking on the container element.
var player = new Clappr.Player({
source: "http://your.video/here.mp4",
// Optionally, send a payload upon the container's pausing with the `onClickPayload` parameter
clickToPauseConfig: {
onClickPayload: { any: 'any' } // sends the payload to container when clicked
});Adds the possibility to customize the label and title of the subtitles.
var player = new Clappr.Player({
source: "http://your.video/here.mp4",
closedCaptionsConfig: {
title: 'Subtitles', // default is none
ariaLabel: 'Closed Captions', // Default is 'cc-button'
labelCallback: function (track) { return track.name }, // track is an object with id, name and track properties (track is TextTrack object)
},
});Add controls to interact with the media in DVR mode.
Add a screen to inform the error name and the possibility to retry to play the media.
Enable Google Analytics events dispatch (play/pause/stop/buffering/etc) adding your gaAccount. Optionally, pass your favorite trackerName as gaTrackerName.
var player = new Clappr.Player({
source: "http://your.video/here.mp4",
gaAccount: 'UA-44332211-1',
gaTrackerName: 'MyPlayerInstance'
});Defines a poster image by adding the poster option to Clappr player. It will appear after video embed, disappear on play and go back when user stops the video. For audio broadcasts, the poster stays visible while playing.
var player = new Clappr.Player({
source: "http://your.video/here.mp4",
poster: "http://url/img.png"
});Inform the current time when a hover on media control seekbar occurs.
var player = new Clappr.Player({
source: "http://your.video/here.mp4",
// Only for live stream with DVR
actualLiveTime: true, // default is false
// Meant to be used with actualLiveTime
actualLiveServerTime: "2015/11/26 06:01:03" // default is current date
});Signals when player enter on buffering state.
A native statistics plugin that accounts QoE metrics such playing time, rebuffering time, total rebuffer count, etc.
Add a watermark over the video. Put watermark option on your embed parameters to automatically add watermark on your video.
Choose corner position by defining position option.
Positions can be bottom-left, bottom-right, top-left and top-right. To define an URL to open when the watermark is clicked, use watermarkLink option.
If the watermarkLink parameter not defined, the watermark will not be clickable.
var player = new Clappr.Player({
source: "http://your.video/here.mp4",
watermark: "http://url/img.png",
position: 'top-right',
watermarkLink: "http://example.net/"
});Add the possibility to exit from fullscreen mode when the video ends. The option exitFullscreenOnEnd disable this behavior.
var player = new Clappr.Player({
source: "http://your.video/here.mp4",
exitFullscreenOnEnd: false
});Add a favicon with the current state of the playback.