react-trailer | Wiki

Video player for React.

Installation

NPM

npm i react-trailer --save

Get Started

Import the components needed to build your video player:

import {
  VideoPlayer,
  Viewer,
  Controls,
  PlayButton,
  FullscreenButton,
  ProgressControl,
  DurationControl,
} from 'react-trailer';

Usage

<VideoPlayer>
  <Viewer>
    <Viewer.Source src="http://dl5.webmfiles.org/big-buck-bunny_trailer.webm" type="video/webm" />
  </Viewer>
  <Controls>
    <ProgressControl />
    <PlayButton>
      {({ isPlaying }) => (isPlaying ? 'Pause' : 'Play')}
    </PlayButton>
    <FullscreenButton>
      {({ isFullscreen }) => (isFullscreen ? 'Close' : 'Fullscreen')}
    </FullscreenButton>
    <DurationControl />
  </Controls>
</VideoPlayer>

Developing

Install dependencies, build the source files and preview

git clone https://github.com/Naimikan/react-trailer.git
npm install
npm run build && npm start