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.

Demo 🎩

https://zzarcon.github.io/react-video-renderer

Installation 🚀

``bash
yarn add react-video-renderer
`

Usage ⛏

> Render video state and communicate user interactions up when volume or time changes.

`jsx
import Video from 'react-video-renderer';

Api 💅

$3

`typescript
interface Props {
src: string;
children: RenderCallback;
controls?: boolean;
autoPlay?: boolean;
preload?: string;
textTracks?: VideoTextTracks;
}
`

$3

`typescript
type RenderCallback = (reactElement: ReactElement, state: VideoState, actions: VideoActions, ref: React.RefObject) => ReactNode;
`

$3

`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;
}
`

$3

`typescript
interface VideoActions {
play: () => void;
pause: () => void;
navigate: (time: number) => void;
setVolume: (volume: number) => void;
requestFullscreen: () => void;
mute: () => void;
unmute: () => void;
toggleMute: () => void;
}
`

Error handling 💥

> this is all you need to detect video errors

`jsx


return (


`jsx


return (


> HTML5 text tracks support for videos.
>
> subtitles can be rendered natively, or they can be rendered using VideoState.currentActiveCues property:

`jsx


Author 🧔

@zzarcon