CLI-Tool
clappr/clappr avatar
clappr/clappr

Clappr: Der pluginorientierte HTML5-Mediaplayer im Detail

clappr/clappr bietet eine praxistaugliche Open-Source-Implementierung mit stabiler Einsatzbarkeit für reale Anwendungsfälle.

7.500 Sterne861 ForksJavaScriptBSD-3-Clause

Auf einen Blick

Was ist das?
Wie das Monorepo clappr/clappr Player, Core und Plugins entkoppelt, warum die Playback-Pakete seit den Major-Updates keine Streaming-Bibliotheken mehr mitbringen und was das für Integrationen bedeutet.
Für wen ist es gedacht?
Clappr passt für Webteams, die einen anpassbaren Player mit eigener Plugin-Logik suchen und Streaming-Formate über separate Playback-Pakete selbst kombinieren wollen. Ungeeignet ist es, wer eine allesinklusive-Lösung mit gebündelten Codecs erwartet.
Darf ich es kommerziell nutzen?
Ja. BSD-3-Clause ist eine freizügige Lizenz: Sie dürfen darauf aufbauende Software nutzen, verändern und verkaufen, solange Sie die Urheberrechts- und Lizenzhinweise beibehalten.
Wird es noch gepflegt?
Ja. Die letzten Commits kamen vor 6 Tagen.
In welcher Sprache ist es geschrieben?
Hauptsächlich JavaScript, laut der Sprachstatistik von GitHub.

Die Antworten beruhen auf den GitHub-Daten des Projekts (zuletzt abgeglichen am 15. September 2026) und auf unserer Analyse. Sie sind keine Rechtsberatung.

TIEFGEHENDE OPEN-SOURCE-ANALYSE

Clappr: pluginorientierter HTML5-Player mit BSD-3-Clause

Clappr beschreibt sich als erweiterbaren, pluginorientierten, HTML5-first Mediaplayer für das Web mit einer modularen Architektur, aus der sich Wiedergabeerfahrungen leicht aufbauen lassen. Das Projekt ist ein JavaScript-Klassiker mit rund 7.500 Sternen und 859 Forks, steht unter der BSD-3-Clause-Lizenz und wird unter der Domain clappr.io mit Dokumentation und Beispielen gepflegt. Nur zwei offene Issues im Repository zeigen, dass die Betreuung über die Issue-Liste läuft und Pull-Requests den eigentlichen Arbeitsort bilden.

Der HTML5-first-Ansatz bedeutet, dass der Player die nativen Medienelemente des Browsers als Basis nutzt und Erweiterungen als Plugins andockt. Wer also Standardformate abspielen will, bekommt eine schlanke Basis, und wer Spezialformate braucht, lädt genau die Playback-Module nach, die dafür zuständig sind. Diese Trennung ist das zentrale Designmerkmal und erklärt sowohl die Flexibilität als auch die Breaking Changes, die im nächsten Abschnitt relevant werden.

Breaking Changes: hls.js und shaka-player als Peers

Die wichtigsten Umbauten der letzten Major-Versionen betreffen die Wiedergabebibliotheken: Neuere Majors betten ihre Streaming-Bibliotheken nicht mehr ein, sondern verlangen, dass die Anwendung den Peer selbst bereitstellt. Konkret bringt @clappr/hlsjs-playback ab Major 3.0.0 hls.js nicht mehr mit, und dash-shaka-playback ab Major 5.0.0 nicht mehr shaka-player. Für Integratoren ändert das die Abhängigkeitsdeklaration im eigenen Projekt, denn hls.js und shaka-player müssen jetzt im eigenen Paketmanagement auftauchen.

Diese Umstellung hat zwei Seiten. Positiv ist, dass man Versionen und Patches der Streaming-Bibliotheken selbst kontrolliert, ohne auf den Player-Betreiber warten zu müssen. Negativ ist, dass Kompatibilitätsprobleme zwischen Player und Peer nicht mehr durch getestete Bündel ausgeschlossen sind. Wer von einer älteren Clappr-Version umzieht, sollte deshalb die Peer-Version festpinnen und die Wiedergabe der kritischen Formate vor dem Rollout gegen die eigene CDN-Infrastruktur testen. Die README-Tabelle verlinkt für beide Pakete auf die jeweiligen README-Dateien im packages-Verzeichnis, die Details zur Konfiguration tragen.

Monorepo-Aufbau von @clappr/player bis html5-tvs-playback

Das Repository ist als Monorepo organisiert und das README dokumentiert die Zuordnung klar. Unter /apps liegen Anwendungen wie die Website clappr.io und die Dokumentationsseite. Unter /packages sammeln sich die Kernpakete: packages/player enthält das Hauptpaket @clappr/player, das die öffentliche API exponiert und den Einstiegspunkt zum Einbetten in Webanwendungen bildet. packages/clappr-core trägt die Kernarchitektur mit den Abstraktionen Core, Container und Playback.

Daneben existieren packages/clappr-plugins als offizielle Pluginsammlung mit fertigen Erweiterungen für UI-Funktionen und Analytics-Anbindungen sowie packages/clappr-zepto, eine modernisierte Fork von Zepto als leichte DOM-Hilfsschicht für die interne UI-Darstellung. Für die Formate sorgen packages/hlsjs-playback für HLS-Streams über hls.js, packages/dash-shaka-playback für MPEG-DASH über Shaka Player und packages/html5-tvs-playback für HbbTV-Smart-TVs mit VoD- und Live-Wiedergabe samt DRM über den OIPF-DRM-Agenten. Wer also Fernseher-Zielplattformen bedient, findet hier ein Modul, das der übliche Web-Player-Pfad nicht abdeckt.

Lokale Entwicklung mit Node 24 und yarn dev

Für die lokale Entwicklung verlangt das README Node.js in Version 24 oder neuer; das Repository pinnt die Major-Version in der .nvmrc. Der dokumentierte Ablauf ist nvm install und dann nvm use im Projektroot, bevor irgendein yarn-Befehl läuft. Das ist keine Formalität: Yarn 1 bricht jeden yarn-Befehl ab, wenn die Engine-Prüfung fehlschlägt, also gibt es kein Drüberinstallieren mit falscher Version.

Nach dem Klonen folgen drei Befehle: yarn install für die Abhängigkeiten, yarn dev für die Entwicklungsumgebung und der Aufruf von http://localhost:8080 im Browser. Für die Dokumentation verweist das README auf mehrere Dateien unter apps/clappr.io/docs: getting_started.md für Setup und Integration, architecture.md für das Zusammenspiel von Player, Core, Containern und Plugins, how_to_build_plugins.md für eigene Plugins sowie api.md als vollständige Referenz der Player-Methoden. Beiträge laufen über CONTRIBUTING.md, ergänzt um einen Code of Conduct.

Plugin-Entwicklung über Core, Container und Playback

Das Architekturmodell dreht sich um drei Abstraktionen: Core, Container und Playback. Der Core verwaltet den Gesamtzustand, der Container umschließt die eigentliche Medienquelle, und das Playback-Interface kapselt die technische Wiedergabe. Plugins docken an diesen Ebenen an und reichen von UI-Elementen bis zu Analytics-Integrationen. Das bedeutet praktisch, dass ein eigenes Plugin nicht den Player modifiziert, sondern an definierten Schnittstellen reagiert, was Updates des Kerns vom eigenen Code entkoppelt.

Der Entwicklungsguide how_to_build_plugins.md beschreibt das Erzeugen und Registrieren eigener Plugins, und die API-Referenz in api.md dokumentiert alle verfügbaren Player-Methoden und -Eigenschaften. Für Teams mit mehreren Formaten liegt der Vorteil in der Wiederverwendung: dieselben Plugins arbeiten über HLS- und DASH-Playback hinweg, weil beide nur die Playback-Abstraktion implementieren. Der Preis ist die Two-Layer-Abhängigkeit: eigene Plugins müssen sowohl zur @clappr/player-Version als auch zur gewählten hls.js- oder shaka-player-Version passen, und diese Matrix prüft niemand außerhalb des eigenen Projekts.

Releases 0.14.x und Auswahlkriterien gegen andere Player

Die Release-Aktivität ist ordentlich: @clappr/player erschien in Version 0.14.1 am 5. August 2026, 0.14.2 am 6. August und 0.14.3 am 15. August 2026, jeweils als Tag im Format @clappr/player@x.y.z. Die Versionsnummern des Hauptpakets bleiben unter 1.0, was im Open-Source-Kontext üblich ist, für Change-Management aber bedeutet, dass auch Minor-Releases verhaltensrelevante Änderungen tragen können. Das Changelog unter den GitHub-Releases listet die Highlights und Breaking Changes je Version.

Als Abwägung gegen Alternativen: Wer nur HLS abspielen will und keine eigene Playerlogik baut, kommt mit einem direkten hls.js-Einbau möglicherweise schlanker davon, weil Clappr eine zusätzliche Architekturschicht darüberlegt. Clappr zahlt sich aus, wenn mehrere Formate, eine eigene UI-Erweiterungslage oder TV-Zielplattformen wie HbbTV über html5-tvs-playback im Spiel sind. Die BSD-3-Clause erlaubt kommerzielle Einbettung ohne Copyleft-Folgen, und die Bundle-Größe lässt sich über bundlephobia für das Paket @clappr/player prüfen, was vor dem Einbau einen objektiven Anhaltspunkt liefert.

Redaktionelles Fazit

Clappr passt für Webteams, die einen anpassbaren Player mit eigener Plugin-Logik suchen und Streaming-Formate über separate Playback-Pakete selbst kombinieren wollen. Ungeeignet ist es, wer eine allesinklusive-Lösung mit gebündelten Codecs erwartet. Vor dem Umbau bestehender Integrationen sollte man prüfen, ob die eingesetzten Peer-Versionen von hls.js und shaka-player die neuen Major-Anforderungen der Playback-Pakete erfüllen.

Offizielle Quellen

  1. Official documentation
  2. Official README
  3. Project repository
  4. Release notes
Community-Notizen

Community-Notizen