Clappr
An extensible, plugin-oriented, HTML5-first media player for the web. It provides a modular architecture to build powerful playback experiences with ease.
Getting Started
Install via npm or yarn:
yarn add @clappr/playerBreaking changes (playback peers)
Recent majors stopped embedding their streaming libraries — you must provide the peer:
| Package | Major | Change |
| ------- | ----- | ------ |
| @clappr/hlsjs-playback | 3.0.0 | hls.js no longer bundled |
| dash-shaka-playback | 5.0.0 | shaka-player no longer bundled |
Project Structure
This repository uses a monorepo layout:
| Directory | Description |
| ---------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
| /apps | Applications such as clappr.io and documentation site |
| /packages | Core packages (e.g. @clappr/player, plugins, utilities) |
| /packages/player | The main Clappr Player package. Exposes the public API and serves as the entry point for embedding the player in web apps. |
| /packages/clappr-core | Contains the core architecture of the player — including components such as Core, Container, and Playback abstractions. |
| /packages/clappr-plugins | Official plugin collection, providing ready-to-use extensions (e.g., UI features, analytics integrations). |
| /packages/clappr-zepto | Lightweight DOM utility layer, a modernized fork of Zepto tailored for Clappr’s internal UI rendering. |
| /packages/hlsjs-playback | Playback module that adds support for HLS streams using hls.js. |
| /packages/dash-shaka-playback | Playback module that enables MPEG-DASH streaming via Shaka Player. |
| /packages/html5-tvs-playback | Playback module for HbbTV smart TVs, supporting VoD/Live and DRM via the OIPF DRM agent. |
Documentation
For the latest guides, examples, and architecture overviews, visit the resources below:
- Getting Started: quick setup and integration examples.
- Architecture Overview: explains how the player, core, containers, and plugins interact.
- Plugin Development Guide: how to create and register custom plugins.
- Player API Reference: complete reference of all available Player methods and properties.
- Frequently Asked Questions: answers to commonly asked questions about setup, configuration, and troubleshooting.
- Changelog: highlights of each version and breaking changes.
Local Development
Requires Node.js ≥ 24. The repo pins the major version in .nvmrc; with nvm, run nvm install then nvm use in the project root before any yarn command. Yarn 1 aborts every yarn command when the engine check fails.
Clone the repository and run:
# Install dependencies
yarn install
Start the development environment
yarn dev
Open in your browser
http://localhost:8080Contributing
We welcome contributions. See CONTRIBUTING.md for how to report bugs, propose features, and submit pull requests. Please follow our Code of Conduct.
Contributors
Thanks to all our amazing contributors! 🎉
See the full list on our contributors page.
Security
Found a vulnerability? Please do not open a public issue — see our Security Policy for how to report it privately and what falls in scope.
License
BSD-3-Clause © Globo.com