Skip to content

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

License

Notifications You must be signed in to change notification settings

asadbek064/react-all-player

Repository files navigation

react-all-player

react-all-player is a simple, lightweight, accessible and customizable React media player that supports modern browsers.

Checkout the demo

npm version

Screenshot of react-all-player

Features

  • 📼 HTML Video & Audio, YouTube & Vimeo - support for the major formats
  • 💪 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
  • 🎤 Events - no messing around with Vimeo and YouTube APIs, all events are standardized across formats
  • 🔎 Fullscreen - supports native fullscreen with fallback to "full window" modes
  • ⌨️ **Shortcuts - supports keyboard shortcuts
  • 🖥 Picture-in-Picture - supports picture-in-picture mode
  • 📱 Playsinline - supports the playsinline attribute
  • 🏎 Speed controls - adjust speed on the fly
  • 📖 Multiple captions - support for multiple caption tracks
  • 👌 Preview thumbnails - support for displaying preview thumbnails

Usage

npm install react-all-player # or yarn add react-all-player
import ReactAllPlayer from 'react-all-player';

<ReactAllPlayer
  sources={[
    {
      file: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4',
      label: '1080p',
    },
    {
      file: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4',
      label: '720p',
    },
  ]}
  subtitles={[
    {
      lang: 'en',
      language: 'English',
      file: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt',
    },
    {
      lang: 'fr',
      language: 'French',
      file: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt',
    },
  ]}
/>;

For NextJS

Dynamically import ReactAllPlayer to ensure it's only loaded on the client-side

import dynamic from "next/dynamic";
const ReactAllPlayer = dynamic(() => import('react-all-player'), {
  ssr: false,
});

Props

react-all-player accepts video element props and these specific 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[] See Customization Default components false
thumbnail string Thumbnails on progress bar hover null false

Customization

You can customize the player by passing defined components with components props. See defined components

By passing components, the passed components will override default existing components. Allow you to customize the player how you want it to be.

Example

import ReactAllPlayer, { TimeIndicator } from 'react-all-player';

<ReactAllPlayer
  {...props}
  components={{
    Controls: () => {
      return (
        <div className="flex items-center justify-between">
          <p>A custom Controls component</p>

          <TimeIndicator />
        </div>
      );
    },
  }}
/>;

Note: use built-in hooks and components for better customization

Override structure

react-all-player use this default structure

To override it, simply pass your own structure as react-all-player's children

import ReactAllPlayer, { Controls, Player, Overlay } from 'react-all-player';

<ReactAllPlayer {...props}>
  <div>
    <div>
      <Player />
    </div>
    <div>
      <Controls />
    </div>
    <div>
      <Overlay />
    </div>
    <div>
      <p>here!</p>
    </div>
  </div>
</ReactAllPlayer>;

Methods

You can access to the video element by passing ref to react-all-player and use all its methods.

Supported formats

react-all-player supports all video element supported formats and HLS format

Contributing

See the contribution guidelines before creating a pull request.

About

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

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages