react-player-youtube

A Simple player like youtube

Demo

https://marvelous-starship-013ffe.netlify.app/

Installation

npm i react-player-youtube --save

Feature

• Support load video mp4, m3u8, ...
• Custom UI streaming video
• Multiple qualities
• FullScreen cross browser support
• Mini mode
• Subtitles
• Speed control

Usage

import { VideoPlayerProvider } from 'react-player-youtube';
import App from './App';

<VideoPlayerProvider>
  <App />
</VideoPlayerProvider>;

import { VideoPlayer } from 'react-player-youtube';

const urlVideo =
  'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8';
const typeVideo = 'application/x-mpegURL';
const source = {
  src: urlVideo,
  type: typeVideo,
};

const playerRef = useRef();

<VideoPlayer ref={playerRef} source={source} />;

Props

| Prop | Description | Type | Require | | ---------------- | --------------------------------------------- | ----------------------------- | ------- | | privateKey | A private key for video component | number | false | | source | Include URL and type of a video to play | { type: string; src: string } | true | | options | Override player default configuration | VideoJsPlayerOptions; | false | | subtitles | List subtitles | SubtitleItem[] | false | | isStreaming | Set player to stream video | VideoJsPlayerOptions; | false | | ads | Adsense for video | Ads | false | | onReady | Callback to call after init player | () => void | false | | onExpand | Callback to call open player with normal mode | () => void | false | | onMini | Callback to call open player with mini mode | () => void | false | | onDestroy | Callback to close the player | () => void | false | | miniPlayerFooter | the element is below the mini player | ReactElement | false |

Types

| Name | Type | Reference | | -------------------- | ------------------------------------------------------------------ | -------------------------------------------------------------------------- | | VideoJsPlayerOptions | | https://videojs.com/guides/options/ | | SubtitleItem | { isDefault?: boolean; value: string; label: string; url: string } | | Ads | { type: AdsType; adsMarker: AdMarker[] } | | AdsType | 'CSAI' or 'SSAI' | | AdMarker | { startTime: number; endTime: number } |

Control Button

| Name | Key | | ---------------------- | -------------------- | | Setting Button | SettingButton | | Previous Button | PrevButton | | Next Button | NextButton | | Mini Player Button | MiniPlayerModeButton | | Theater Mode Button | TheaterButton | | Expand Button | ExpandButton | | Close Mini Mode Button | CloseButton |

Issues

If you have some bug or have any feature request, feel free to submit an issue on the github repo.

Contributing

We welcome your contribution! Fork the repo, make some changes, submit a pull-request! See the contribution guidelines before creating a pull request.

License

MIT