Skip to content

Latest commit

 

History

History
143 lines (112 loc) · 8.15 KB

README.md

File metadata and controls

143 lines (112 loc) · 8.15 KB
Raw

netplayer

Latest npm version

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