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

About plugins

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.

Types of plugins

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.

Scope of Plugins

Core

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.

CorePlugin Class

| 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. |

UICorePlugin Class

| 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. |

Container

The plugin has control only within the scope of the media.

Examples: SpinnerThreeBounce, WaterMark, Stats and others.

ContainerPlugin Class

| 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. |

UIContainerPlugin Class

| 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. |

Playback

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.

Plugins Description

Media Control

A plugin that renders the interface over the video container and add the possibility to control playback actions (play, pause, stop).

Click to pause

Adds the possibility to toggle between the play/pause playback states by clicking on the container element.

Closed captions

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)
  },
});

DVR controls

Add controls to interact with the media in DVR mode.

Error screen

Add a screen to inform the error name and the possibility to retry to play the media.

Google analytics

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'
});

Poster

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"
});

Seek time

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
});

Spinner three bounce

Signals when player enter on buffering state.

Stats

A native statistics plugin that accounts QoE metrics such playing time, rebuffering time, total rebuffer count, etc.

Watermark

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/"
});

You can also pass the watermark options in an object:

var player = new Clappr.Player({
  source: "http://your.video/here.mp4",
  watermark: {
    url: "http://url/img.png",
    link: "http://example.net/",
    position: "bottom-right",
    opacity: 1,
    // Default behavior is "always-fixed", without "fixed" it will
    // nudge the whatermark when controls are visible and set it's z-index to 10000.
    // Values permited: "discrete", "discrete-fixed", "always", "always-fixed".
    // If the values don't match, it will fallback to "always-fixed".
    behavior: "always-fixed",
    // The delay and opacity for the watermark when in "discrete" behavior
    discreteDelay: 3000,
    discreteOpacity: 0.2,
    // The nudge in pixels when the behavior is not fixed.
    // This values are calculated according to the setted position.
    onControls: {
      x: 0,
      y: 48
    },
    // Nudge the watermark
    nudge: {
      x: 0,
      y: 0
    }
  }
});

End video

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
});

Favicon

Add a favicon with the current state of the playback.