Video & Audio Player

A lightweight, modular React media player for video and podcast playback. Built with TypeScript, designed for flexibility, and optimized for Fairu's CDN and HLS streaming.

React Media Player

Everything You Need for Modern Media Playback

HLS Streaming

Adaptive bitrate streaming with HLS support. Automatically adjusts quality based on network conditions.

Audio & Video Support

One unified player for both audio and video content. Perfect for podcasts, music, and video streaming.

Podcast Chapters

Native podcast chapter support with timestamps, titles, and optional artwork. Perfect for long-form content.

Subtitles & Captions

Full WebVTT subtitle support with multiple tracks, styling options, and accessibility features.

Playlist Management

Built-in playlist management with queue, shuffle, and repeat modes. Create seamless listening experiences.

Ad Integration (VAST)

Built-in VAST/VPAID support for pre-roll, mid-roll, and post-roll ads. Monetize your content with industry-standard ad formats.

Quick Setup

Up and Running in Minutes

Get started with just a few lines of code. The player integrates seamlessly with any React application.

1

Install via npm

npm install @fairu/player
2

Import the components

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

Start playing

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

Simple, Powerful Components

Use familiar React patterns to build audio and video experiences with full control over playback.

Audio Player with Chapterstsx
<AudioPlayer
  src="https://example.com/podcast.mp3"
  title="Episode 1: Getting Started"
  artwork="/cover.jpg"
/>
Video Player with Captionstsx
<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 }}
/>

Ready to Build Your Media Experience?

Install @fairu/player and start building beautiful audio and video experiences. Explore our Storybook for interactive component demos.