New Tiers availableMore feature, Up to 10 Million AI-Tokens for free

Read blog post

Video- & Audio-Player

Ein leichtgewichtiger, modularer React-Media-Player für Video- und Podcast-Wiedergabe. Mit TypeScript entwickelt, für Flexibilität konzipiert und optimiert für Fairus CDN und HLS-Streaming.

React Media Player

Alles, was du für moderne Medienwiedergabe brauchst

HLS-Streaming

Adaptive Bitrate-Streaming mit HLS-Unterstützung. Die Qualität wird automatisch an die Netzwerkbedingungen angepasst.

Audio- & Video-Unterstützung

Ein einheitlicher Player für Audio- und Videoinhalte. Perfekt für Podcasts, Musik und Video-Streaming.

Podcast-Kapitel

Native Podcast-Kapitelunterstützung mit Zeitstempeln, Titeln und optionalem Artwork. Perfekt für längere Inhalte.

Untertitel & Captions

Vollständige WebVTT-Untertitel-Unterstützung mit mehreren Spuren, Styling-Optionen und Barrierefreiheit.

Playlist-Verwaltung

Integrierte Playlist-Verwaltung mit Warteschlange, Zufallswiedergabe und Wiederholungsmodi. Erstelle nahtlose Hörerlebnisse.

Werbe-Integration (VAST)

Integrierte VAST/VPAID-Unterstützung für Pre-Roll-, Mid-Roll- und Post-Roll-Anzeigen. Monetarisiere deine Inhalte mit branchenüblichen Werbeformaten.

Schnelle Einrichtung

In wenigen Minuten startklar

Starte mit nur wenigen Zeilen Code. Der Player integriert sich nahtlos in jede React-Anwendung.

1

Via npm installieren

npm install @fairu/player
2

Komponenten importieren

import { AudioPlayer, VideoPlayer } from '@fairu/player';
import '@fairu/player/styles.css';
3

Abspielen starten

<AudioPlayer src="https://example.com/podcast.mp3" />
<VideoPlayer src="https://example.com/video.mp4" />
Code Examples

Einfache, leistungsstarke Komponenten

Nutze vertraute React-Patterns, um Audio- und Video-Erlebnisse mit voller Kontrolle über die Wiedergabe zu erstellen.

Audio-Player mit Kapitelntsx
<AudioPlayer
  src="https://example.com/podcast.mp3"
  title="Episode 1: Getting Started"
  artwork="/cover.jpg"
/>
Video-Player mit Untertitelntsx
<VideoPlayer
  src="https://example.com/video.mp4"
  poster="/thumbnail.jpg"
  captions={[{ src: '/en.vtt', label: 'English', lang: 'en' }]}
/>
HLS-Streamingtsx
<VideoPlayer
  src="https://stream.fairu.app/video/playlist.m3u8"
  hlsConfig={{ enableWorker: true, lowLatencyMode: true }}
/>

Bereit für dein Medienerlebnis?

Installiere @fairu/player und erstelle beeindruckende Audio- und Video-Erlebnisse. Entdecke unser Storybook für interaktive Komponenten-Demos.