React player for video
npm install react-player-youtube
!typescript

A Simple player like youtube
https://marvelous-starship-013ffe.netlify.app/
npm i react-player-youtube --save
- Support load video mp4, m3u8, ...
- Custom UI streaming video
- Multiple qualities
- FullScreen cross browser support
- Mini mode
- Subtitles
- Speed control
``js
import { VideoPlayerProvider } from 'react-player-youtube';
import App from './App';
`
`js
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();
``
| 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 |
| 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 } |
| 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 |
If you have some bug or have any feature request, feel free to submit an issue on the github repo.
We welcome your contribution! Fork the repo, make some changes, submit a pull-request!
See the contribution guidelines before creating a pull request.
MIT