netplayer

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