Select a source type to see how the player handles different formats

ReactAllPlayer

Simple React component that provides versatile and good looking UI video player.

HLS SupportDASH SupportAccessibleCustomizableResponsive

Installation

pnpm install react-all-player

Quick Usage

demo.tsx

import ReactAllPlayer from 'react-all-player'
  
<ReactAllPlayer
  sources={[
    {
      file: 'https://ezy.ovh/sample-1080.mp4',
      label: '1080p'
    },
    {
      file: 'https://ezy.ovh/sample-720.mp4',
      label: '720p'
    }
  ]}
  subtitles={[
    {
      lang: 'en',
      language: 'English',
      file: 'https://ezy.ovh/english-vtt',
    }
  ]}
    poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jp"
/>

Key Features

🎛 Rich API - toggle playback, volume, seeking, and more
💪 Accessible - full support for VTT captions and screen readers
📹 Streaming - support for hls.js and dash.js streaming playback
🔎 Fullscreen - native support with fallback to "full window"
🖥 Picture-in-Picture - supports PiP mode
📖 Multiple captions - support for multiple caption tracks
🔧 Customizable - make the player look how you want with the markup you want
⌨️ Shortcuts - supports keyboard shortcuts
🖼️ Preview thumbnails - support for displaying preview thumbnails on hover

Available Props

Prop	Type	Description	Default	Required
sources	Source[]	An array of sources contain `file`, `label` and `type`	null	true
subtitles	Subtitle[]	An array of subtitles contain `file`, `lang` and `language`	null	false
hlsRef	React.MutableRefObject<Hls \| null>	`hls.js` instance ref	React.createRef()	false
dashRef	React.MutableRefObject<DashJS.MediaPlayerClass \| null>	`dashjs` instance ref	React.createRef()	false
hlsConfig	Hls['config']	`hls.js` config		false
changeSourceUrl	(currentSourceUrl: string, source: Source) => string	A function that modify given source url (`hls` only)	() => null	false
onHlsInit	(hls: Hls) => void	A function that called after hls.js initialization	() => null	false
onDashInit	(dash: DashJS.MediaPlayerClass) => void	A function that called after dashjs initialization	() => null	false
onInit	(videoEl: HTMLVideoElement) => void	A function that called after video initialization	() => null	false
ref	React.MutableRefObject<HTMLVideoElement \| null>	`video` element ref	null	false
i18n	I18n	Translations	Default Translations	false
hotkeys	Hotkey[]	Hotkeys (shortcuts)	Default Hotkeys	false
components	Component[]	Customization components	Default components	false
thumbnail	string	Thumbnails on progress bar hover	null	false
poster	string	Video poster image on load	null	false

View full documentation on GitHub →