Registry / web-framework / react-video-renderer

react-video-renderer

library2.5.1jsnpmunverified

react-video-renderer is a lightweight (under 2KB), dependency-free React component designed to simplify the creation of custom video players. Utilizing a render-props pattern, it offers a declarative API for managing HTML5 video state and actions, abstracting away direct DOM interactions. The library's current stable version is 2.5.1. Its core philosophy emphasizes a clear separation of concerns, providing video logic and state updates without imposing UI, allowing developers full control over the player's appearance. Key differentiators include its 'no side effects out of the box' approach, a robust set of video state properties (e.g., currentTime, volume, status, isLoading), and control actions (e.g., play, pause, navigate, setVolume), alongside built-in cross-browser compatibility and support for HTML5 text tracks.

web-framework

npm install react-video-renderer

package ↗

INSTALL

IMPORT

SIG · REACT-VIDEO-RENDER

react-video-renderer

web-frameworkjavascriptv2.5.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Video

✓ import Video from 'react-video-renderer';

✗ import { Video } from 'react-video-renderer';

The main component is a default export.

VideoState

✓ import type { VideoState } from 'react-video-renderer';

✗ import { VideoState } from 'react-video-renderer';

Types should be imported using `import type` for clarity and bundler optimization in TypeScript projects.

VideoActions

✓ import type { VideoActions } from 'react-video-renderer';

✗ const { VideoActions } = require('react-video-renderer');

This library is primarily designed for modern React applications using ES Modules. CJS `require` is not officially supported and will likely not work for types.

This quickstart demonstrates how to integrate `react-video-renderer` to build a custom video player UI. It shows accessing video state (time, volume, status), controlling playback with actions (play, pause, navigate, mute), and rendering a basic progress bar and volume slider using HTML input elements. It also includes basic error and loading state display.

import Video from 'react-video-renderer'; const MyCustomVideoPlayer = ({ src }) => ( <Video src={src}> {(video, state, actions) => ( <div style={{ maxWidth: '640px', margin: '20px auto', border: '1px solid #ccc' }}> {video} <div style={{ padding: '10px', background: '#f0f0f0' }}> <p>Time: {Math.floor(state.currentTime)}s / {Math.floor(state.duration)}s</p> <p>Volume: {Math.round(state.volume * 100)}% {state.isMuted ? '(Muted)' : ''}</p> <p>Status: {state.status} {state.isLoading ? '(Loading...)' : ''}</p> <input type="range" value={state.currentTime} max={state.duration || 0} onChange={e => actions.navigate(parseFloat(e.target.value))} style={{ width: '100%', marginBottom: '10px' }} /> <input type="range" value={state.volume} max={1} step={0.01} onChange={e => actions.setVolume(parseFloat(e.target.value))} style={{ width: '100%', marginBottom: '10px' }} /> <button onClick={actions.play} disabled={state.status === 'playing'} style={{ marginRight: '5px' }}>Play</button> <button onClick={actions.pause} disabled={state.status === 'paused'} style={{ marginRight: '5px' }}>Pause</button> <button onClick={actions.toggleMute} style={{ marginRight: '5px' }}>{state.isMuted ? 'Unmute' : 'Mute'}</button> <button onClick={actions.requestFullscreen}>Fullscreen</button> </div> {state.status === 'errored' && <p style={{ color: 'red', padding: '10px' }}>Error loading video!</p>} </div> )} </Video> ); export default MyCustomVideoPlayer;

Debug

Known issues

gotchaModern browsers often prevent `autoplay` of videos with sound unless the video is muted or the user has previously interacted with the page. Relying solely on the `autoPlay` prop might not work as expected.

fix

To increase the likelihood of autoplay, consider adding `muted={true}` to the `Video` component's props initially. Provide a UI element for users to unmute the video.

affects: >=1.0.0

gotchaThe render-props pattern, while powerful, can sometimes lead to deeply nested JSX, which might reduce readability or make refactoring more complex compared to React Hooks. Newer projects might prefer hook-based solutions.

fix

While `react-video-renderer` is designed around render props, consider refactoring your component structure for better organization. For very complex UIs, carefully manage the scope and avoid excessive nesting.

affects: >=1.0.0

breakingWhile not explicitly documented in the provided README, major version updates (e.g., from v1 to v2, or v2 to v3 if it occurs) often involve breaking changes to the render prop signature, available state properties, or action methods. Always consult the changelog for new major releases.

fix

Before upgrading to a new major version, thoroughly review the library's official changelog and migration guide. Test your application extensively after an upgrade to identify and address any breaking API changes.

affects: >=2.0.0

Errors

Common errors & fixes

TypeError: (0 , _reactVideoRenderer.Video) is not a function

The `Video` component is a default export, but it's being imported as a named export.

fix

Change the import statement from `import { Video } from 'react-video-renderer';` to `import Video from 'react-video-renderer';`

TypeError: Cannot read properties of undefined (reading 'play')

The `actions` object, which contains control functions like `play`, is not correctly destructured or available within the render prop's scope.

fix

Ensure your render prop function signature includes `actions` (e.g., `(video, state, actions) => {...}`) and that you are using `actions.play()` within that scope.

Video src attribute is invalid

The `src` prop provided to the `Video` component is either an empty string, `null`, `undefined`, or a malformed URL that the browser's HTML5 video element cannot parse.

fix

Verify that the `src` prop points to a valid, accessible video file URL. Check for typos, correct protocols (http/https), and ensure the file exists and is supported by the browser.

Upgrade

Version history

2.5.1latest on npm

Audit

Dependencies

reactrequiredPeer dependency for rendering React components.

Agent activity

4 hits · last 30 days

node

Resources

packagehttps://www.npmjs.com/package/react-video-renderer ↗