Clappr is 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/player📦 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. |
📚 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.
Legacy references:
- API Docs (v0.2.x): auto-generated class documentation for older versions.
Note: this API reference is outdated and mainly useful for historical context.
🧑💻 Local Development
Clone the repository and run:
# Install dependencies
yarn install
# Start the development environment
yarn dev
# Open in your browser
http://localhost:8080✨ Contributors
Thanks to all our amazing contributors! 🎉
See the full list on our contributors page.
📄 License
BSD-3-Clause © Globo.com