netplayer

A simple React component that provide good looking UI video player

Usage

npm install netplayer # or yarn add netplayer

import NetPlayer from 'netplayer';

<NetPlayer
  sources={[
    {
      file: 'https://www.googleapis.com/drive/v3/files/1Q6LsjpWgPoYIs6GaD8G6lNZRM2-VJXAY?alt=media&key=AIzaSyCFwU3MAtwS2TgPPEObV-hDXexH83ae1Fs',
      label: '1080p',
    },
    {
      file: 'https://www.googleapis.com/drive/v3/files/1sKXS6VU8uUGeW8WPKDp2dXxwAJ96Tk9c?alt=media&key=AIzaSyCFwU3MAtwS2TgPPEObV-hDXexH83ae1Fs',
      label: '720p',
    },
  ]}
  subtitles={[
    {
      lang: 'en',
      language: 'English',
      file: 'https://subtitles.netpop.app/subtitles/20211116/1637057950304_国王排名 2_英语.srt',
    },
    {
      lang: 'vi',
      language: 'Tiếng Việt',
      file: 'https://subtitles.netpop.app/subtitles/20211116/1637057969656_国王排名 2_越南语.srt',
    },
  ]}
/>;

Or play around with this component

Props

NetPlayer 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 NetPlayer, { TimeIndicator } from 'netplayer';

<NetPlayer
  {...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

NetPlayer use this default structure

To override it, simply pass your own structure as NetPlayer's children

import NetPlayer, { Controls, Player, Overlay } from 'netplayer';

<NetPlayer {...props}>
  <div>
    <div>
      <Player />
    </div>
    <div>
      <Controls />
    </div>
    <div>
      <Overlay />
    </div>
    <div>
      <p>Look I'm over here!</p>
    </div>
  </div>
</NetPlayer>;

Methods

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

Supported formats

NetPlayer supports all video element supported formats and HLS format

Contributing

See the contribution guidelines before creating a pull request.

Other video players

• react-player
• react-tuby
• video-react
• plyr
• video.js