Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zzarcon/react-video-renderer
Build custom video players effortless
https://github.com/zzarcon/react-video-renderer
component custom player react render-prop render-props renderer video video-player
Last synced: about 1 month ago
JSON representation
Build custom video players effortless
- Host: GitHub
- URL: https://github.com/zzarcon/react-video-renderer
- Owner: zzarcon
- License: mit
- Created: 2018-04-18T00:43:45.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T04:08:33.000Z (over 1 year ago)
- Last Synced: 2024-07-16T13:09:22.944Z (2 months ago)
- Topics: component, custom, player, react, render-prop, render-props, renderer, video, video-player
- Language: TypeScript
- Homepage: https://zzarcon.github.io/react-video-renderer
- Size: 1.88 MB
- Stars: 116
- Watchers: 8
- Forks: 14
- Open Issues: 44
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-video-renderer [](https://travis-ci.org/zzarcon/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](https://bundlephobia.com/result?p=react-video-renderer)
* Cross-browser support, no more browser hacks.
## Demo 🎩
[https://zzarcon.github.io/react-video-renderer](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';
{(video, state, actions) => (
{video}
{state.currentTime} / {state.duration} / {state.buffered}
Play
Pause
Fullscreen
)}
```
## Api 💅
### Props
```typescript
interface Props {
src: string;
children: RenderCallback;
controls?: boolean;
autoPlay?: boolean;
preload?: string;
textTracks?: VideoTextTracks;
}
```
### Render method
```typescript
type RenderCallback = (reactElement: ReactElement, state: VideoState, actions: VideoActions, ref: React.RefObject) => ReactNode;
```
### State
```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;
}
```
### Actions
```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
{(video, state) => {
if (state.status === 'errored') {
return (
Error
);
}
return (
{video}
)
}}
```
## Loading state ✨
> you can still interact with the player regardless if the video is loading or not
```jsx
{(video, state, actions) => {
const loadingComponent = state.isLoading ? 'loading...' : undefined;
return (
{video}
{loadingComponent}
Play
Pause
)
}}
```
## Video text tracks 🚂
> HTML5 [text tracks](https://html.spec.whatwg.org/multipage/media.html#the-track-element) support for videos.
>
> subtitles can be rendered natively, or they can be rendered using `VideoState.currentActiveCues` property:
```jsx
{(video, state, actions) => {
const cues = state.currentActiveCues('subtitles', 'en');
const subtitles =
cue && cue.length > 0 ? (
{Array.prototype.map.call(cues, (cue, i) => {cue.text})}
) : undefined;
return (
{video}
{subtitles}
Play
Pause
)
}}
```
## Author 🧔
[@zzarcon](https://twitter.com/zzarcon)