> Build custom video players effortless
npm install react-video-renderer> Build custom video players effortless
* Render props, get all video state passed down as props.
* Bidirectional flow to render and update the video state in a declarative way.
* No side effects out of the box, you just need to build the UI.
* Actions handling: play, pause, mute, unmute, navigate, etc
* Dependency free, <2KB size
* Cross-browser support, no more browser hacks.
https://zzarcon.github.io/react-video-renderer
``bash`
yarn add react-video-renderer
> Render video state and communicate user interactions up when volume or time changes.
`jsx
import Video from 'react-video-renderer';
`

`typescript`
interface Props {
src: string;
children: RenderCallback;
controls?: boolean;
autoPlay?: boolean;
preload?: string;
textTracks?: VideoTextTracks;
}
`typescript`
type RenderCallback = (reactElement: ReactElement
`typescript`
interface VideoState {
status: 'playing' | 'paused' | 'errored';
currentTime: number;
currentActiveCues: (kind: VideoTextTrackKind, lang: string) => TextTrackCueList | null | undefined;
volume: number;
duration: number;
buffered: number;
isMuted: boolean;
isLoading: boolean;
error?: MediaError | null;
}
`typescript`
interface VideoActions {
play: () => void;
pause: () => void;
navigate: (time: number) => void;
setVolume: (volume: number) => void;
requestFullscreen: () => void;
mute: () => void;
unmute: () => void;
toggleMute: () => void;
}
> this is all you need to detect video errors
`jsx
return (
Loading state ✨
> you can still interact with the player regardless if the video is loading or not
`jsx
`Video text tracks 🚂
> HTML5 text tracks support for videos.
>
> subtitles can be rendered natively, or they can be rendered using
VideoState.currentActiveCues property:`jsx
src="my-video.mp4"
textTracks={{
'subtitles': {
selectedTrack: 0,
tracks: [
{ src: 'subtitles-en.vtt', lang: 'en', label: 'Subtitles (english)' },
{ src: 'subtitles-es.vtt', lang: 'es', label: 'Subtitles (spanish)' },
]
}
}}
>
{(video, state, actions) => {
const cues = state.currentActiveCues('subtitles', 'en');
const subtitles =
cue && cue.length > 0 ? (
{Array.prototype.map.call(currentEnglishSubtitlesCues, (cue, i) => {cue.text})}
) : undefined; return (
{video}
{subtitles}
)
}}
``