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.

hoangvu12 / netplayer