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

Quick Start

npm install react-all-player
example.tsx
import ReactAllPlayer from 'react-all-player'
  
<ReactAllPlayer
  sources={[
    {
      file: 'https://ezy.ovh/5rGlD',
      label: '1080p'
    },
    {
      file: 'https://ezy.ovh/hsPA0',
      label: '720p'
    }
  ]}
  subtitles={[
    {
      lang: 'en',
      language: 'English',
      file: 'https://ezy.ovh/1PQZY',
    },
    {
      lang: 'fr',
      language: 'French',
      file: 'https://ezy.ovh/cQLFa',
    },
  ]}
/>
View From A Blue Moon © Brainfarm

Notable Features

  • 💪 Accessible - full support for VTT captions and screen readers
  • 🔧 Customizable - make the player look how you want with the markup you want
  • 📱 Responsive - works with any screen size
  • 📹 Streaming - support for hls.js, and dash.js streaming playback
  • 🎛 API - toggle playback, volume, seeking, and more through a standardized API
  • 🔎 Fullscreen - supports native fullscreen with fallback to "full window" modes
  • 📱 Playsinline - supports the playsinline attribute
  • 🖥 Picture-in-Picture - supports picture-in-picture mode
  • ⌨️ Shortcuts - supports keyboard shortcuts
  • 🔄 Override components or build custom ones for easy integration