🎬 An extensible media player for the web.
Alternatives To Clappr
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Clappr6,345108494 months ago238June 17, 202020bsd-3-clauseHTML
:clapper: An extensible media player for the web.
Shaka Player6,3393171007 hours ago159August 31, 2022392apache-2.0JavaScript
JavaScript player library / DASH & HLS client / MSE-EME player
Xgplayer6,17712556 days ago1,075September 22, 202232mitJavaScript
A HTML5 video player with a parser that saves traffic
Chimee2,10618203 years ago68June 15, 202030mitJavaScript
a video player framework aims to bring wonderful experience on browser
Indigo Player1,217
a year ago38April 20, 202050apache-2.0TypeScript
Highly extensible, modern, JavaScript video player. Handles MPEG-Dash / HLS / MPEG-4 and is built on top of the HTML5 video element.
18 hours ago68December 06, 202122mitJavaScript
Hello Muiplayer37824 months ago25July 30, 202217gpl-3.0JavaScript
💡 An excellent HTML5 video player component
4 months ago23mitKotlin
The Easiest Way To Play/Stream Video And Audio Using Google ExoPlayer In Your Android Application
Eplayer26119 months ago62September 06, 2020JavaScript
:crystal_ball: A web-component html5 video player facing future
19 hours ago3TypeScript
💡一款开箱即用的H5弹幕播放器,可自定义样式和组件;插件化,响应式设计;内置支持MP4文件的流播放,同时借助dash.js, hls.js等流媒体协议库可接入任意类型的流媒体协议, 同时提供弹幕播放且提供两套事件和模板系统来适配PC端和移动端。
Alternatives To Clappr
Select To Compare

Alternative Project Comparisons

Huge changes in the latest version. See 0.4.0 version changelog for more information

jsDelivr hits (npm scoped)

Clappr is an extensible media player for the web. Your architecture is projected primarily into plugins, adding low accoupling by design to the project and the possibility to add infinitely features easily.

Clappr uses HTMLVideoElement by default, which guarantees support to many platforms. You have the possibility to extend the default HTML5 playback or the playback interface to create a new media support, just like a plugin!

Clappr is a composition of two other projects: @clappr/core and @clappr/plugins.

The @clappr/core contains the basic functionalities from Clappr (plugin architecture, class abstractions, public interfaces, events handlers and etc) and the @clappr/plugins are the repository where the plugins maintained by the Clappr team lives. More info about those projects into your repositories.

All Clappr projects are written in *.js using the latest features of ECMAScript.

Clappr is under development but production-ready. Feel free to open issues and send pull requests.

🚩 Table of Contents

🎬 Usage

Via script tag:

Add the following script on your HTML:

  <script type="text/javascript" src="[email protected]/dist/clappr.min.js"></script>

Now, create the player:

  <div id="player"></div>
    var player = new Clappr.Player({source: "", parentId: "#player"});

📹 Demo

Live demo to test, with a possibility to add external plugins.

📚 API Documentation

You can check the current API doc via @clappr/core here.

🛠 Configuration

You can check the embed parameters supported by @clappr/core here.

🔌 Built-in Plugins

You can check the plugins used on Clappr player via @clappr/plugins here.

🤝 Third party plugins/integrations

External Plugins

Plugin Status Compatible with latest Clappr URL
Media Control Ready Yes joaopaulovieira/clappr-media-control-plugin
Video Queue (Playlist) Ready Yes joaopaulovieira/clappr-queue-plugin
Thumbnails on seekbar Ready Yes tjenkinson/clappr-thumbnails-plugin
Markers Ready Yes tjenkinson/clappr-markers-plugin
Level Selector Ready Yes clappr/clappr-level-selector-plugin
360 videos Ready Yes thiagopnts/video-360
Chromecast Ready Yes clappr/clappr-chromecast-plugin
DASH with shaka Ready Yes clappr/dash-shaka-playback
Playback Speed Ready Yes bikegriffith/clappr-playback-rate-plugin
Clappr Stats Ready Yes leandromoreira/clappr-stats
Clappr Nerd Stats Ready Yes lucasrodcosta/clappr-nerd-stats
Pause while far Ready Yes leandromoreira/clappr-pause-tab-visibility
RTMP Ready Yes clappr/clappr-rtmp-plugin
Picture-in-Picture Ready Yes tjenkinson/clappr-pip-plugin
Hybrid P2P & CDN Ready Yes
Comments on seekbar Ready ? Metrakit/clappr-comment-plugin
Voice control Ready ? flavioribeiro/clappr-speech-control-plugin
Dash WIP No shankardevy/clappr-dash-plugin
Youtube Ready No towerz/clappr-youtube-playback
Googel IMA Pre Roll Ready Yes kslimani/clappr-google-ima-html5-preroll
VAST Ad plugin WIP No vix-simplex/clappr-ad-plugin
Dynamic Overlay Ready Yes Lethea/clappr-dynamic-text-overlay
Scroll Text Overlay Ready Yes Lethea/clappr-marquee-overlay
Playback Speed Controller Ready Yes Lethea/clapper-playback-speed-plugin-extended
FLV Ready Yes andrefilimono/clappr-flvjs-playback
Context Menu Ready Yes joaopaulovieira/clappr-context-menu-plugin

External Integrations

Integration Status Compatible with latest Clappr URL
P2P Media Loader Ready Yes Novage/p2p-media-loader

🎞 Supported Formats

IE10 rtmp
IE11 rtmp rtmp rtmp
Microsoft Edge ? ? rtmp rtmp ? rtmp
Firefox rtmp rtmp rtmp rtmp
Chrome rtmp rtmp rtmp
Safari rtmp rtmp rtmp rtmp
Android rtmp rtmp rtmp
WiiU Browser ? rtmp rtmp ?
PS4 Browser ? rtmp rtmp ?

rtmp means that the support is made by an external plugin.

⏯ About Autoplay

Clappr has no control over autoplay Browser Policy.

Therefore, we're not able to execute play and unmute actions sequentially in every situation. There are a series of scenarios where the Browser blocks these actions based on its own policy.

Each browser has their own different restrictions, and the usual behavior is to activate the sound only after a user interacts with the player.

For more info about the auto play video policy, you can read these docs:

⁉️ FAQ & Troubleshooting

How to write a plugin?

See the wiki for more info.

How can I disable or override a plugin?

Let's say you want to disable or override a plugin.

Disable a plugin

// let's disable the loading animation (the 'spinner' plugin)
var player = new Clappr.Player({ ... });
// after attach

Override a plugin

// let's disable the loading animation (the 'spinner' plugin)
export default class NoSpinner extends UIContainerPlugin {
  get name() { return 'spinner' }
new Clappr.Player({ plugins: [NoSpinner]})

How can I use clappr with ReactJS?

How can I use clappr with ionic/angular?

How can I use clappr with Vue.js?


How can I Log messages with Clappr?

Add this snippet before you instantiate the player Clappr.Log.setLevel(0)

Common steps to verify issues

Very often people open issues related to stream not working, freezing, glitching, stopping, and so on. You can try these steps below, taking notes about the results:

  • try to run the same example at CDN
  • check the cors headers at your servers
  • try to run it on hls.js demo page
  • try to run it on flashls. demo page
  • try to run on your page the following source:
  • try different browsers/OS's to see if the problems remain
  • try to use a tool to check the health of your stream (both input, ie: RTMP, and segmentation, ie: DASH or HLS): like mediainfo (for instance you could: mediainfo, Apple's mediastreamvalidator too, hls-analyzer and etc.
//HLS-Analyzer usage example

pip install m3u8
git clone
cd hls-analyzer

How to handle player fatal errors?

Player fatal errors can be handled using onError API event.

var player = new Clappr.Player({
  parent: '#myplayer',
  source: '',
  events: {
    onError: function(e) {
      // Here the code to handle the error

Note: the type of error event object depends on the type of playback component resolved to play the video.


This is a simple example using the no_op playback to display error messages.

You can try the following Javascript code on Clappr demo page:

var playerElement = document.getElementById("player-wrapper");

var r = 3; // Retry attempts

var player = new Clappr.Player({
  // source: '',
  source: '',
  disableErrorScreen: true, // Disable the internal error screen plugin
  height: 360,
  width: 640,
  events: {
    onError: function(e) {
      var s = player.options.source;
      // Replace previous line by the following line to simulate successful recovery
      // var s = (r > 2) ? player.options.source : '';
      var t = 10;
      var retry = function() {
        if (t === 0) {
          var o = player.options;
          o.source = s;
        setTimeout(retry, 1000);
        autoPlay: true,
        source: 'playback.error',
        playbackNotSupportedMessage: 'Network fatal error.' + ((r > 0)
            ? ' Retrying in <span id="retryCounter"></span> seconds ...'
            : ' All retry attempts failed'),
      if (r > 0) {


Another example

This example uses a custom error container plugin to display error messages.

You can try the following Javascript code on Clappr demo page:

var playerElement = document.getElementById("player-wrapper");

var ErrorPlugin = Clappr.ContainerPlugin.extend({
  name: 'error_plugin',
  bindEvents: function() { this.listenTo(this.container, Clappr.Events.CONTAINER_ERROR, this.onError) },
  hide: function() { this._err && this._err.remove() },
  show: function() {
    var $ = Clappr.$
    var txt = (this.options.errorPlugin && this.options.errorPlugin.text) ? this.options.errorPlugin.text : 'A fatal error occured.';
    this._err = $('<div>')
        'position': 'absolute',
        'z-index': '999',
        'width': '100%',
        'height': '100%',
        'background-image': 'url(' + this.background + ')',
        'background-size': 'contain',
        'background-repeat': 'no-repeat',
        'padding-top': '15%',
        'text-align': 'center',
        'font-weight': 'bold',
        'text-shadow': '1px 1px #fff',
          'font-size': '200%',
      .append($('<p>').html('Retrying in <span class="retry-counter">10</span> seconds ...')
          'font-size': '120%',
          'margin': '15px',
    this.container && this.container.$el.prepend(this._err);
  onError: function(e) {
    if (!this.container) return;;
    var tid, t = 10, retry = function() {
      if (t === 0) {
        if (this.options.errorPlugin && this.options.errorPlugin.onRetry) {
        } else {
      tid = setTimeout(retry, 1000);

var player = new Clappr.Player({
  disableErrorScreen: true, // Disable the internal error screen plugin
  source: '',
  plugins: [ErrorPlugin],
  errorPlugin: {
    // text: 'My custom error message.',
    onRetry: function(e) {
      // simulate successful recovery
      // or decide here what to do between each retry
        source: '',
        autoPlay: true,
  height: 360,
  width: 640


🚀 Companies using Clappr

🙌 Contributors

This project exists thanks to all the people who contribute.

🌟 Sponsor


Popular Hls Projects
Popular Video Player Projects
Popular Networking Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Video Player
Html5 Video
Html5 Audio
Html5 Video Player