{"id":13616876,"url":"https://github.com/clappr/clappr-plugins","last_synced_at":"2025-04-14T03:31:50.358Z","repository":{"id":34969058,"uuid":"182134599","full_name":"clappr/clappr-plugins","owner":"clappr","description":"Main plugins for the Clappr project","archived":false,"fork":false,"pushed_at":"2024-04-30T18:25:14.000Z","size":49770,"stargazers_count":29,"open_issues_count":5,"forks_count":17,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-04-08T09:47:01.799Z","etag":null,"topics":["analytics","builtins-plugins","captions","clappr","clappr-plugins","controls","dvr","favicon","mediacontrol","player","plugins","poster","spinner","stats","timer","watermark"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/clappr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":"AUTHORS","dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-04-18T18:01:51.000Z","updated_at":"2024-10-24T08:32:06.000Z","dependencies_parsed_at":"2023-12-21T16:03:02.707Z","dependency_job_id":"7895c799-058c-410c-9d05-afb948051af6","html_url":"https://github.com/clappr/clappr-plugins","commit_stats":{"total_commits":1573,"total_committers":78,"mean_commits":"20.166666666666668","dds":0.768595041322314,"last_synced_commit":"5f5cda51363ad691efa2e3dd35b1eb6b9d3da9c2"},"previous_names":[],"tags_count":262,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clappr%2Fclappr-plugins","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clappr%2Fclappr-plugins/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clappr%2Fclappr-plugins/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clappr%2Fclappr-plugins/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/clappr","download_url":"https://codeload.github.com/clappr/clappr-plugins/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248815586,"owners_count":21165951,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["analytics","builtins-plugins","captions","clappr","clappr-plugins","controls","dvr","favicon","mediacontrol","player","plugins","poster","spinner","stats","timer","watermark"],"created_at":"2024-08-01T20:01:34.338Z","updated_at":"2025-04-14T03:31:45.341Z","avatar_url":"https://github.com/clappr.png","language":"JavaScript","funding_links":[],"categories":["HarmonyOS"],"sub_categories":["Windows Manager"],"readme":"\u003ch1\u003e\nClappr-plugins\n\u003c/h1\u003e\n\nClappr-plugins is part of Clappr project that contains the main builtins plugins of the Clappr Player.\n\nClappr is under development but production-ready. Feel free to open issues and send us pull requests.\n\n\u003cp\u003e\n  \u003ca href=\"https://badge.fury.io/js/%40clappr%2Fplugins\"\u003e\u003cimg src=\"https://badge.fury.io/js/%40clappr%2Fplugins.svg\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://bundlephobia.com/result?p=@clappr/plugins@latest\"\u003e\u003cimg src=\"https://img.shields.io/bundlephobia/min/@clappr/plugins\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://travis-ci.org/clappr/clappr-plugins\"\u003e\u003cimg src=\"https://travis-ci.org/clappr/clappr-plugins.svg?branch=master\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://coveralls.io/github/clappr/clappr-plugins?branch=master\"\u003e\u003cimg src=\"https://coveralls.io/repos/github/clappr/clappr-plugins/badge.svg?branch=master\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/clappr/clappr-plugins/blob/master/LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/badge/license-BSD--3--Clause-blue.svg\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.jsdelivr.com/package/npm/@clappr/plugins\"\u003e\u003cimg alt=\"jsDelivr hits (npm)\" src=\"https://img.shields.io/jsdelivr/npm/hm/@clappr/plugins?color=orange\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nThis project exports individually and as a single object (Plugins) the builtins plugins to create the Clappr Player. Those plugins are:\n\n- [MediaControl](https://github.com/clappr/clappr-plugins#media-control)\n- [ClickToPausePlugin](https://github.com/clappr/clappr-plugins#click-to-pause)\n- [ClosedCaptions](https://github.com/clappr/clappr-plugins#closed-captions)\n- [DVRControls](https://github.com/clappr/clappr-plugins#dvr-controls)\n- [ErrorScreen](https://github.com/clappr/clappr-plugins#error-screen)\n- [GoogleAnalytics](https://github.com/clappr/clappr-plugins#google-analytics)\n- [PosterPlugin](https://github.com/clappr/clappr-plugins#poster)\n- [SeekTime](https://github.com/clappr/clappr-plugins#seek-time)\n- [SpinnerThreeBouncePlugin](https://github.com/clappr/clappr-plugins#spinner-three-bounce)\n- [StatsPlugin](https://github.com/clappr/clappr-plugins#stats)\n- [WaterMarkPlugin](https://github.com/clappr/clappr-plugins#watermark)\n- [EndVideo](https://github.com/clappr/clappr-plugins#end-video)\n- [Favicon](https://github.com/clappr/clappr-plugins#favicon)\n\n## About plugins\n\nA 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.\n\nThe 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](https://github.com/clappr/clappr-plugins#types-of-plugins).\n\n## Types of plugins\n\nA plugin can be loaded within an internal permission level (scope) of the Player and must extend some base type supported by Clappr.\n\nThe scopes are: [Core](https://github.com/clappr/clappr-plugins#core), [Container](https://github.com/clappr/clappr-plugins#container) and [Playback](https://github.com/clappr/clappr-plugins#playback). To learn more about the Clappr architecture, visit: https://github.com/clappr/clappr/wiki/Architecture\n\nFollowing the classes that a plugin can extend, this will define its type and structure.\n\nPlugins that do not handle UI, can extend from: [CorePlugin](https://github.com/clappr/clappr-plugins#coreplugin), [ContainerPlugin](https://github.com/clappr/clappr-plugins#containerplugin) or [Playback](https://github.com/clappr/clappr-plugins#playback).\n\nPlugins that need to manipulate the UI must extend from: [UICorePlugin]() or [UIContainerPlugin]().\n\n## Scope of Plugins\n\n### Core\n\nThe 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).\n\nExamples: [MediaControl](https://github.com/clappr/clappr-plugins/blob/master/src/plugins/media_control/media_control.js), [ClosedCaptions](https://github.com/clappr/clappr-plugins/blob/master/src/plugins/closed_captions/closed_captions.js), [EndVideo](https://github.com/clappr/clappr-plugins/blob/master/src/plugins/end_video.js), and others.\n\n#### CorePlugin Class\n\n| Methods    | Description |\n|------------|-----------|\n| bindEvents | A method called in the `constructor` where listeners for the desired events must be created. |\n| 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. |\n| 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. |\n| destroy    | A method that destroys the plugin's listeners. |\n\n#### UICorePlugin Class\n\n| Methods    | Description |\n|------------|-----------|\n| bindEvents | A method called in the `constructor` where listeners for the desired events must be created. |\n| 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. |\n| 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. |\n| 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. |\n| destroy    | A method that removes the plugin of the `DOM`. |\n\n---\n\n### Container\n\nThe plugin has control only within the scope of the media.\n\nExamples: [SpinnerThreeBounce](https://github.com/clappr/clappr-plugins/blob/master/src/plugins/spinner_three_bounce/spinner_three_bounce.js), [WaterMark](https://github.com/clappr/clappr-plugins/blob/master/src/plugins/watermark/watermark.js), [Stats](https://github.com/clappr/clappr-plugins/blob/master/src/plugins/stats/stats.js) and others.\n\n#### ContainerPlugin Class\n\n| Métodos    | Description |\n|------------|-----------|\n| bindEvents |A method called in the `constructor` where listeners for the desired events must be created. |\n| 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. |\n| 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. |\n| destroy    |  A method that destroys the plugin's listeners. |\n\n#### UIContainerPlugin Class\n\n| Métodos    | Description |\n|------------|-----------|\n| bindEvents | A method called in the `constructor` where listeners for the desired events must be created. |\n| 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. |\n| 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. |\n| 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. |\n| destroy    | A method that removes the plugin of the `DOM`. |\n\n---\n\n### Playback\n\nControls 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.\n\nMore information about the Playback base class in the Clappr-core repository: https://github.com/clappr/clappr-core/blob/master/src/base/playback/playback.js\n\nExemplos: [HlsPlayback](https://github.com/clappr/hlsjs-playback), [DashShakaPlayback](https://github.com/clappr/dash-shaka-playback), [HTML5Video](https://github.com/clappr/clappr-core/blob/master/src/playbacks/html5_video/html5_video.js) and others.\n\n\n## Plugins Description\n\n### Media Control\nA plugin that renders the interface over the video container and add the possibility to control playback actions (play, pause, stop).\n\n### Click to pause\nAdds the possibility to toggle between the `play`/`pause` playback states by clicking on the container element.\n```javascript\nvar player = new Clappr.Player({\n  source: \"http://your.video/here.mp4\",\n  // Optionally, send a payload upon the container's pausing with the `onClickPayload` parameter\n  clickToPauseConfig: { \n    onClickPayload: { any: 'any' } // sends the payload to container when clicked\n});\n```\n\n### Closed captions\nAdds the possibility to customize the label and title of the subtitles.\n```javascript\nvar player = new Clappr.Player({\n  source: \"http://your.video/here.mp4\",\n  closedCaptionsConfig: {\n    title: 'Subtitles', // default is none\n    ariaLabel: 'Closed Captions', // Default is 'cc-button'\n    labelCallback: function (track) { return track.name }, // track is an object with id, name and track properties (track is TextTrack object)\n  },\n});\n```\n\n### DVR controls\nAdd controls to interact with the media in DVR mode.\n\n### Error screen\nAdd a screen to inform the error name and the possibility to retry to play the media.\n\n### Google analytics\nEnable Google Analytics events dispatch (play/pause/stop/buffering/etc) adding your `gaAccount`. Optionally, pass your favorite trackerName as `gaTrackerName`.\n```javascript\nvar player = new Clappr.Player({\n  source: \"http://your.video/here.mp4\",\n  gaAccount: 'UA-44332211-1',\n  gaTrackerName: 'MyPlayerInstance'\n});\n```\n### Poster\nDefines 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.\n```javascript\nvar player = new Clappr.Player({\n  source: \"http://your.video/here.mp4\",\n  poster: \"http://url/img.png\"\n});\n```\n\n### Seek time\nInform the current time when a hover on media control seekbar occurs.\n```javascript\nvar player = new Clappr.Player({\n  source: \"http://your.video/here.mp4\",\n  // Only for live stream with DVR\n  actualLiveTime: true, // default is false\n  // Meant to be used with actualLiveTime\n  actualLiveServerTime:  \"2015/11/26 06:01:03\" // default is current date\n});\n```\n\n### Spinner three bounce\nSignals when player enter on buffering state.\n\n### Stats\nA native statistics plugin that accounts QoE metrics such playing time, rebuffering time, total rebuffer count, etc.\n\n### Watermark\nAdd a watermark over the video. Put `watermark` option on your embed parameters to automatically add watermark on your video.\n\nChoose corner position by defining `position` option.\n\nPositions 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.\n\nIf the `watermarkLink` parameter not defined, the watermark will not be clickable.\n```javascript\nvar player = new Clappr.Player({\n  source: \"http://your.video/here.mp4\",\n  watermark: \"http://url/img.png\",\n  position: 'top-right',\n  watermarkLink: \"http://example.net/\"\n});\n```\n### End video\nAdd the possibility to exit from fullscreen mode when the video ends. The option `exitFullscreenOnEnd` disable this behavior.\n```javascript\nvar player = new Clappr.Player({\n  source: \"http://your.video/here.mp4\",\n  exitFullscreenOnEnd: false\n});\n```\n### Favicon\nAdd a favicon with the current state of the playback.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclappr%2Fclappr-plugins","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fclappr%2Fclappr-plugins","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclappr%2Fclappr-plugins/lists"}