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/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.

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! 🎉

<!-- readme: contributors -start --> <table> <tbody> <tr> <td align="center"> <a href="https://github.com/towerz"> <img src="https://avatars.githubusercontent.com/u/989801?v=4" width="100;" alt="towerz"/> <br /> _{<b>towerz</b>} </a> </td> <td align="center"> <a href="https://github.com/flavioribeiro"> <img src="https://avatars.githubusercontent.com/u/244265?v=4" width="100;" alt="flavioribeiro"/> <br /> _{<b>flavioribeiro</b>} </a> </td> <td align="center"> <a href="https://github.com/leandromoreira"> <img src="https://avatars.githubusercontent.com/u/55913?v=4" width="100;" alt="leandromoreira"/> <br /> _{<b>leandromoreira</b>} </a> </td> <td align="center"> <a href="https://github.com/joaopaulovieira"> <img src="https://avatars.githubusercontent.com/u/5631063?v=4" width="100;" alt="joaopaulovieira"/> <br /> _{<b>joaopaulovieira</b>} </a> </td> <td align="center"> <a href="https://github.com/tjenkinson"> <img src="https://avatars.githubusercontent.com/u/3259993?v=4" width="100;" alt="tjenkinson"/> <br /> _{<b>tjenkinson</b>} </a> </td> <td align="center"> <a href="https://github.com/jhonatangcavalcanti"> <img src="https://avatars.githubusercontent.com/u/14154066?v=4" width="100;" alt="jhonatangcavalcanti"/> <br /> _{<b>jhonatangcavalcanti</b>} </a> </td> </tr> <tr> <td align="center"> <a href="https://github.com/tchakabam"> <img src="https://avatars.githubusercontent.com/u/1480052?v=4" width="100;" alt="tchakabam"/> <br /> _{<b>tchakabam</b>} </a> </td> <td align="center"> <a href="https://github.com/kslimani"> <img src="https://avatars.githubusercontent.com/u/1758996?v=4" width="100;" alt="kslimani"/> <br /> _{<b>kslimani</b>} </a> </td> <td align="center"> <a href="https://github.com/thiagopnts"> <img src="https://avatars.githubusercontent.com/u/322239?v=4" width="100;" alt="thiagopnts"/> <br /> _{<b>thiagopnts</b>} </a> </td> <td align="center"> <a href="https://github.com/greenkeeperio-bot"> <img src="https://avatars.githubusercontent.com/u/14790466?v=4" width="100;" alt="greenkeeperio-bot"/> <br /> _{<b>greenkeeperio-bot</b>} </a> </td> <td align="center"> <a href="https://github.com/leaofelipe"> <img src="https://avatars.githubusercontent.com/u/1847691?v=4" width="100;" alt="leaofelipe"/> <br /> _{<b>leaofelipe</b>} </a> </td> <td align="center"> <a href="https://github.com/dayvson"> <img src="https://avatars.githubusercontent.com/u/59447?v=4" width="100;" alt="dayvson"/> <br /> _{<b>dayvson</b>} </a> </td> </tr> <tr> <td align="center"> <a href="https://github.com/pedrochamberlain"> <img src="https://avatars.githubusercontent.com/u/40682476?v=4" width="100;" alt="pedrochamberlain"/> <br /> _{<b>pedrochamberlain</b>} </a> </td> <td align="center"> <a href="https://github.com/bikegriffith"> <img src="https://avatars.githubusercontent.com/u/167782?v=4" width="100;" alt="bikegriffith"/> <br /> _{<b>bikegriffith</b>} </a> </td> <td align="center"> <a href="https://github.com/vagnervjs"> <img src="https://avatars.githubusercontent.com/u/1696024?v=4" width="100;" alt="vagnervjs"/> <br /> _{<b>vagnervjs</b>} </a> </td> <td align="center"> <a href="https://github.com/felipecesr"> <img src="https://avatars.githubusercontent.com/u/10980841?v=4" width="100;" alt="felipecesr"/> <br /> _{<b>felipecesr</b>} </a> </td> <td align="center"> <a href="https://github.com/barbosa"> <img src="https://avatars.githubusercontent.com/u/235208?v=4" width="100;" alt="barbosa"/> <br /> _{<b>barbosa</b>} </a> </td> <td align="center"> <a href="https://github.com/ronag"> <img src="https://avatars.githubusercontent.com/u/3065230?v=4" width="10