{"id":13616867,"url":"https://github.com/clappr/clappr-core","last_synced_at":"2025-04-14T03:31:51.179Z","repository":{"id":42535381,"uuid":"166113005","full_name":"clappr/clappr-core","owner":"clappr","description":"Core components of the Clappr player architecture","archived":false,"fork":false,"pushed_at":"2024-04-30T18:22:25.000Z","size":52299,"stargazers_count":67,"open_issues_count":16,"forks_count":27,"subscribers_count":15,"default_branch":"master","last_synced_at":"2025-04-09T02:34:36.183Z","etag":null,"topics":["architecture","clappr","html5-audio","html5-video","html5-video-player","javascript","mp4","mp4-video","player","streaming-audio","streaming-video","video-player"],"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-01-16T21:13:55.000Z","updated_at":"2025-03-04T02:34:20.000Z","dependencies_parsed_at":"2023-02-18T06:31:09.919Z","dependency_job_id":"e1164acc-9dbf-4586-a385-23ee34135495","html_url":"https://github.com/clappr/clappr-core","commit_stats":{"total_commits":2550,"total_committers":104,"mean_commits":24.51923076923077,"dds":0.8043137254901961,"last_synced_commit":"e345dbb5efdd1c17dd35cc1754b324e34cc2bcba"},"previous_names":[],"tags_count":280,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clappr%2Fclappr-core","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clappr%2Fclappr-core/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clappr%2Fclappr-core/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clappr%2Fclappr-core/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/clappr","download_url":"https://codeload.github.com/clappr/clappr-core/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248815587,"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":["architecture","clappr","html5-audio","html5-video","html5-video-player","javascript","mp4","mp4-video","player","streaming-audio","streaming-video","video-player"],"created_at":"2024-08-01T20:01:34.258Z","updated_at":"2025-04-14T03:31:46.171Z","avatar_url":"https://github.com/clappr.png","language":"JavaScript","funding_links":[],"categories":["HarmonyOS"],"sub_categories":["Windows Manager"],"readme":"\u003ch1\u003e\nClappr-core\n\u003c/h1\u003e\n\nClappr-core is part of Clappr player that contains the main architecture of the Clappr project.\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%2Fcore\"\u003e\u003cimg src=\"https://badge.fury.io/js/%40clappr%2Fcore.svg\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://bundlephobia.com/result?p=@clappr/core@latest\"\u003e\u003cimg src=\"https://img.shields.io/bundlephobia/min/@clappr/core\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://coveralls.io/github/clappr/clappr-core?branch=master\"\u003e\u003cimg src=\"https://coveralls.io/repos/github/clappr/clappr-core/badge.svg?branch=master\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/clappr/clappr-core/blob/master/LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/badge/license-BSD--3--Clause-blue.svg\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n:video_camera: Demo\n---\n[Live demo](http://clappr.io/demo/) to test with support for external plugins.\n\n:triangular_flag_on_post: Table of Contents\n-----\n* [Demo](https://github.com/clappr/clappr-core#video_camera-demo)\n* [Table of Contents](https://github.com/clappr/clappr-core#triangular_flag_on_post-table-of-contents)\n* [Features](https://github.com/clappr/clappr-core#gem-features)\n* [Usage](https://github.com/clappr/clappr-core#clapper-Usage)\n* [API Documentation](https://github.com/clappr/clappr-core#books-api-documentation)\n* [Configuration](https://github.com/clappr/clappr-core#hammer_and_wrench-configuration)\n* [Development](https://github.com/clappr/clappr-core#computer-development)\n* [Contributors](https://github.com/clappr/clappr-core#raised_hands-contributors)\n* [Sponsor](https://github.com/clappr/clappr-core#money_with_wings-sponsor)\n\n:gem: Features\n---\n* Uses the [HTM5 video tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video)\n  * Makes it easy to use while maintaining high platform support.\n* Plugin architecture\n  * Add new features without impacting other functions.\n* Extensible\n  * Add support for other video formats or modify already existing plugins.\n\n:clapper: Usage\n---\n### Via script tag:\n\nAdd the following script in your HTML `\u003chead\u003e`:\n```html\n\u003cscript type=\"text/javascript\" src=\"https://cdn.jsdelivr.net/npm/@clappr/core@latest/dist/clappr-core.min.js\"\u003e\u003c/script\u003e\n```\n\nNow, create the player by adding the following to your `\u003cbody\u003e`:\n```html\n\u003cdiv class=\"player\"\u003e\u003c/div\u003e\n\u003cscript\u003e\n\tvar playerElement = document.querySelector(\".player\");\n\tvar player = new Clappr.Player({\n\t\tsource: \"http://your.video/here.mp4\",\n\t\tparent: playerElement,\n\t});\n\u003c/script\u003e\n```\n\n### Via npm module:\n\nThis project is available on npm at https://www.npmjs.com/package/@clappr/core\n\n`yarn install @clappr/core --save-dev`\n\nYou should specify the base URL for where the assets are located using the `baseUrl` option:\n```javascript\n  var player = new Clappr.Player({\n  \tsource: \"http://your.video/here.mp4\",\n\t  baseUrl: \"http://example.com/assets/clappr\"\n  });\n```\nIn the above case, Clappr will expect all of the [assets (in the dist folder)](https://github.com/clappr/clappr-core/tree/master/dist) to be accessible at \"http://example.com/assets/clappr-core\".\nYou need to arrange the assets to be located at `baseUrl` during your build process.\n\n#### Installing for [webpack](https://webpack.github.io/):\nBy default, webpack will look at the `main` field in `package.json` and use the built version of the project. If this is all you want, there is nothing else for you to do.\n\nIf you would like to build Clappr yourself into your project during your build process then add the following to your webpack config:\n```javascript\nresolve: {\n    alias: { Clappr: '@clappr/core/src/main.js' },\n    root: [path.resolve(__dirname, 'node_modules/@clappr/core/src')],\n    extensions: ['', '.js'],\n}\n```\n\n#### Installing for [browserify](http://browserify.org/):\nBrowserify will look at the `main` field in `package.json` and use the built version of the project.\n\n:books: API Documentation\n---\nCreate an instance:\n\n```javascript\nvar player = new Clappr.Player({\n  source: \"http://your.video/here.mp4\",\n  parentId: \"#player\"\n});\n```\n\n### \u003cimg src=\"https://cldup.com/V4mJE_EtiV-3000x3000.png\"\u003e player.attachTo(element)\nYou can use this method to attach the player to a given element. You don't need to do this when specifying it during the player instantiation passing the `parentId` param.\n\n### \u003cimg src=\"https://cldup.com/V4mJE_EtiV-3000x3000.png\"\u003e player.play()\n\nPlays the current source.\n\n\n### \u003cimg src=\"https://cldup.com/V4mJE_EtiV-3000x3000.png\"\u003e player.pause()\n\nPauses the current source.\n\n### \u003cimg src=\"https://cldup.com/V4mJE_EtiV-3000x3000.png\"\u003e player.stop()\nStops the current source.\n\n### \u003cimg src=\"https://cldup.com/V4mJE_EtiV-3000x3000.png\"\u003e player.mute()\nMutes the current source.\n\n### \u003cimg src=\"https://cldup.com/V4mJE_EtiV-3000x3000.png\"\u003e player.unmute()\nUnmutes the current source.\n\n### \u003cimg src=\"https://cldup.com/V4mJE_EtiV-3000x3000.png\"\u003e player.seek(value)\nSeeks the current video (`source`). For example, `player.seek(120)` will seek to second 120 (2 minutes) of the current video.\n\n### \u003cimg src=\"https://cldup.com/V4mJE_EtiV-3000x3000.png\"\u003e player.seekPercentage(value)\nSeeks the current video (`source`). For example, `player.seek(50)` will seek to the middle of the current video.\n\n### \u003cimg src=\"https://cldup.com/V4mJE_EtiV-3000x3000.png\"\u003e player.isPlaying()\nReturns `true` if the current source is playing, otherwise returns `false`.\n\n### \u003cimg src=\"https://cldup.com/V4mJE_EtiV-3000x3000.png\"\u003e player.getPlugin(pluginName)\nReturns the plugin instance. Example:\n```javascript\nvar strings = player.getPlugin('strings');\n```\nThis method searches the `Core` and `Container` plugins by name and returns the first one found.\n\n### \u003cimg src=\"https://cldup.com/V4mJE_EtiV-3000x3000.png\"\u003e player.getCurrentTime()\nReturns the current time (in seconds) of the current source.\n\n### \u003cimg src=\"https://cldup.com/V4mJE_EtiV-3000x3000.png\"\u003e player.getDuration()\nReturns the duration (in seconds) of the current source.\n\n### \u003cimg src=\"https://cldup.com/V4mJE_EtiV-3000x3000.png\"\u003e player.resize(size)\nResizes the current player canvas. The `size` parameter should be a literal object with `height` and `width`. Example:\n```javascript\nplayer.resize({height: 360, width: 640});\n```\n\n### \u003cimg src=\"https://cldup.com/V4mJE_EtiV-3000x3000.png\"\u003e player.destroy()\nDestroy the current player and removes it from the DOM.\n\n### \u003cimg src=\"https://cldup.com/V4mJE_EtiV-3000x3000.png\"\u003e player.load(source)\nLoads a new source.\n\n### \u003cimg src=\"https://cldup.com/V4mJE_EtiV-3000x3000.png\"\u003e player.configure(options)\nEnables to configure a player after its creation.\n\n:hammer_and_wrench: Configuration\n---\nAll parameters listed below shall be added on `Clappr.Player` object instantiation or  via `player.configure`.\n\nExample:\n```javascript\nvar player = new Clappr.Player({\n  source: \"http://your.video/here.mp4\",\n  parameter1: \"value1\",\n  parameter2: \"value2\",\n});\n\n// or\n\nplayer.configure({\n  parameter3: \"value3\",\n  parameter4: \"value4\",\n})\n```\n\nNote that some options passed via `configure` as not applied instantly. In this case, these options are applied in the next video.\n\n### Player Configuration\n\n#### parent\nUsed to specify where the player should be attached using the DOM element.\n\n#### parentId\nUsed to specify where the player should be attached using a id of one DOM element.\n\n\u003c!-- add this on the version 0.0.5 --\u003e\n\u003c!-- #### parentSelector\nUsed to specify where the player should be attached using a class of one DOM element. --\u003e\n\n#### source\nSets media source URL to play. You can set the media source accordingly to existing playbacks.\n\n#### sources\nAn array of sources. Used to play the next media source on array if the previous one was invalid.\n\n#### mimeType\nSets the media source format used on the `source` option. Use if you need to use a media URL without extension.\n\n#### events\nObject to add callbacks on mapped events. The current list of mapped events is:\n\n```javascript\n{\n  events: {\n    onReady: function() { ... },//Fired when the player is ready on startup\n    onResize: function() { ... },//Fired when player resizes\n    onPlay: function() { ... },//Fired when player starts to play\n    onPause: function() { ... },//Fired when player pauses\n    onStop: function() { ... },//Fired when player stops\n    onEnded: function() { ... },//Fired when player ends the video\n    onSeek: function() { ... },//Fired when player seeks the video\n    onError: function() { ... },//Fired when player receives an error\n    onTimeUpdate: function() { ... },//Fired when the time is updated on player\n    onVolumeUpdate: function() { ... },//Fired when player updates its volume\n    onSubtitleAvailable: function() { ... },//Fired when subtitles is available\n  }\n}\n```\n\nIf you want to listen for events from other layers, **you need to add the bind for the specific scope**.\n\nFor example, the `CONTAINER_STATE_BUFFERING` event is triggered by the `container`, so if you want to listen for events from the container layer on your code, you can bind events like the example below:\n\n```javascript\nplayer.core.activeContainer.on(Clappr.Events.CONTAINER_STATE_BUFFERING, function() { ... })\n```\n\nSee all existing events on Clappr [here](https://github.com/clappr/clappr-core/blob/master/src/base/events/events.js#L227).\n\n#### plugins\nAn object used to config external plugins instances and plugins behaviors to Clappr.\n\n```javascript\n{\n  plugins: {\n    core: [CorePlugin],\n    container: [ContainerPlugin],\n    playback: [Playbacks],\n    loadExternalPluginsFirst: true,\n    loadExternalPlaybacksFirst: true,\n  }\n}\n```\n\nExample of external plugins config:\n\n```html\n// Playback\n\u003cscript src='https://cdn.jsdelivr.net/npm/@clappr/hlsjs-playback@latest/dist/hlsjs-playback.min.js'\u003e\u003c/script\u003e\n\n// Container\n\u003cscript src='https://cdn.jsdelivr.net/npm/@clappr/stats-plugin@latest/dist/clappr-stats.min.js'\u003e\u003c/script\u003e\n```\n\n```javascript\n{\n  plugins: {\n    container: [ClapprStats],\n    playback: [HlsjsPlayback],\n  }\n}\n```\n\nYou can pass plugins of any category in on flat array too. Example:\n\n```javascript\n{\n  plugins: [ClapprStats, HlsjsPlayback]\n}\n```\n\n#### plugins.loadExternalPluginsFirst\n\u003e Default Value: `true`\n\nForce external plugins to be loaded before default Clappr plugins.\n\n#### plugins.loadExternalPlaybacksFirst\n\u003e Default Value: `true`\n\nForce external playbacks to be loaded before default Clappr playbacks.\n\n#### height\n\u003e Default Value: `360px`\n\nSets player height. You can set using px (`500px`) or percentage (`100%`).\n\n#### width\n\u003e Default Value: `640px`\n\nSets player width. You can set using px (`500px`) or percentage (`100%`).\n\n#### autoPlay\n\u003e Default Value: `false`\n\nConfigure Clappr to play media after the player is ready to play.\n\n#### mute\n\u003e Default Value: `false`\n\nSet volume to zero enabling the [video tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video) muted attribute.\n\n#### loop\n\u003e Default Value: `false`\n\nRestart video after the video ends enabling the [video tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video) loop attribute.\n\n\n#### language\n\u003e Default Value: `en-US`\n\nSets one of the current languages supported on Clappr. You can check all supported languages on the [Strings plugin](https://github.com/clappr/clappr-core/blob/master/src/plugins/strings/strings.js#L35-93).\n\nIf you want to provide your translations, create a PR by editing the [Strings plugin](https://github.com/clappr/clappr-core/blob/master/src/plugins/strings/strings.js).\n\n#### playbackNotSupportedMessage\n\u003e Default Value: The `playback_not_supported` string on [Strings Plugin](https://github.com/clappr/clappr-core/blob/master/src/plugins/strings/strings.js)\n\nDefine a custom message to be displayed when playback is not supported.\n\n#### useCodePrefix\n\u003e Default value: `true`\n\nClappr has a pattern to create the `code` attribute on the `error` object using the name of the component where an error occurs with the original error code.\n\nExample: `hls:networkError_manifestLoadError (component_name:error_code)`\n\nYou can disable this pattern. Just use the original error code setting this option with the value `false`.\n\n#### autoSeekFromUrl\n\u003e Default value: `true`\n\nBy default, if the URL contains a time then the media will seek to this point.\n\nExample: `example.com?t=100` would start the media at 100 seconds.\n\nYou can disable this behaviour setting this option with the value `false`.\n\n#### includeResetStyle\n\u003e Default value: `true`\n\nBy default, Clappr reset a bunch of styles that may impact your own style. With this option, it's possible to enable/disable  the use of [_resets.scss](https://github.com/clappr/clappr-core/blob/master/src/base/scss/_reset.scss).\n\n### Playback Configuration\nClappr has a specific set of options for playbacks. The configuration for the playback, it's still only compatible with `html5_video` playback (and derived playbacks).\n\nBelow, the description of each one:\n\n```javascript\nplayback: {\n  preload: 'metadata',\n  disableContextMenu: false,\n  controls: true,\n  crossOrigin: 'use-credentials',\n  playInline: true,\n  minimumDvrSize: null,\n  externalTracks: [],\n  hlsjsConfig: {},\n  shakaConfiguration: {},\n}\n```\n\n#### preload\n\u003e Default value: `metadata`\n\nIn case you're loading an on-demand video (`mp4`), it's possible to define the way the video will be preloaded according to preload attribute options.\n\nSee more about the video tag preload attribute [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video).\n\n#### disableContextMenu\n\u003e Default value: `false`\n\nDisable possibility to activate the context menu.\n\n#### controls\n\u003e Default value: `true`\n\nUse to enable or disable the [HTML5 video tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video) controls.\n\n#### crossOrigin\n\u003e Default value: `use-credentials`\n\nUse to set one of the possible values supported on the HTML5 video tag.\n\nSee more about the video tag crossOrigin attribute [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video).\n\n#### playInline\n\u003e Default value: `true`\n\nEnable or Disable the [HTML5 video tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video) playInline attribute.\n\n#### minimumDvrSize\nUse to set the minimum value to active DVR for live media. This option is only used for HTML5Playback at this moment.\n\n#### externalTracks\nAn array of tracks. Each track must have the attributes `src`, `lang` and `label`. The attribute `kind` on track object is optional because of the default value `subtitles`.\n\nSee more about tracks on the video tag element [here](https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video).\n\n\n#### hlsjsConfig\nAny specific settings for [hls.js](https://github.com/video-dev/hls.js/blob/master/docs/API.md) should be in this option.\n\n```javascript\n{\n  playback: {\n    hlsjsConfig: {\n      // hls.js specific options\n    }\n  }\n}\n```\n\n#### shakaConfiguration\nAny specific settings for [shaka-player](https://shaka-player-demo.appspot.com/docs/api/tutorial-config.html) should be in this option.\n\n```javascript\n{\n  playback: {\n    shakaConfiguration: {\n      // shaka-player specific options\n    }\n  }\n}\n```\n\n:computer: Development\n---\nEnter the project directory and install the dependencies:\n\n`yarn install`\n\nMake your changes and run the tests:\n\n`yarn test`\n\nBuild your own version:\n\n`yarn build`\n\nCheck the result on `dist/` folder.\n\nStarting a local server:\n\n`yarn start`\n\nThis command will start an HTTP Server on port 8080, you can check a sample page with Clappr on http://localhost:8080/\n\n:raised_hands: Contributors\n---\nThis project exists thanks to all the people who [contribute](https://github.com/clappr/clappr-core/graphs/contributors).\n\n:money_with_wings: Sponsor\n---\n[![image](https://cloud.githubusercontent.com/assets/244265/5900100/ef156258-a54b-11e4-9862-7e5851ed9b81.png)](http://globo.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclappr%2Fclappr-core","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fclappr%2Fclappr-core","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclappr%2Fclappr-core/lists"}