video-react

library0.16.0jsnpmunverified

Video-React is an open-source web video player library constructed using the React JavaScript library, specifically designed for modern HTML5 video environments. It provides a comprehensive suite of React components for building customizable video player interfaces, handling core functionalities such as playback control, volume management, progress indication, and full-screen toggling. The current stable version, 0.16.0, supports a broad range of React versions up to 18.0.0. While not following a strict time-based release cadence, the project actively maintains the library, with recent updates ensuring compatibility with newer React versions and addressing bugs. Its primary differentiators are its React-centric architecture, allowing for seamless integration into React applications, and its visually appealing default styling, which is heavily inspired by the well-known video.js project. Users must manually install `react` and `react-dom` as peer dependencies.

web-framework

npm install video-react

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VIDEO-REACT

video-react

web-frameworkjavascriptv0.16.0

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.

Player

✓ import { Player } from 'video-react';

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

The primary container component for the video player. Typically used with named imports.

CSS Styles

✓ import 'video-react/dist/video-react.css';

✗ require('video-react/dist/video-react.css'); // While technically works in some bundlers, ESM import is idiomatic.

The core CSS styles are essential for the player's appearance and must be imported separately. Can also be imported as SCSS or linked via CDN.

Source

✓ import { Player, Source } from 'video-react';

✗ import Source from 'video-react/lib/components/Source';

Used as a child of the `Player` component to specify video sources. All sub-components are exported as named exports from the main package.

ControlBar

✓ import { Player, ControlBar, PlayToggle } from 'video-react';

Commonly imported named component to customize the player's control bar and its sub-components (e.g., `PlayToggle`, `VolumeMenuButton`).

PlaybackRateMenuButton

✓ import { PlaybackRateMenuButton } from 'video-react';

✗ import { PlaybackRate } from 'video-react';

This component was renamed from `PlaybackRate` to `PlaybackRateMenuButton` in `v0.7.0`. Ensure you use the correct name.

This quickstart demonstrates how to set up a basic Video-React player with common controls and a video source, including the essential CSS import.

import React from 'react'; import { Player, ControlBar, PlayToggle, VolumeMenuButton, BigPlayButton, Source } from 'video-react'; import 'video-react/dist/video-react.css'; // Don't forget to import the CSS const VideoPlayer = () => { return ( <div style={{ width: '80%', margin: '20px auto' }}> <Player playsInline poster="https://video-react.github.io/assets/poster.png" src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4" > <BigPlayButton position="center" /> <ControlBar autoHide={false} disableDefaultControls={false}> <PlayToggle /> <VolumeMenuButton /> {/* Add other control bar components as needed */} </ControlBar> {/* You can also specify sources as children, for multiple formats */} {/* <Source src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4" type="video/mp4" /> */} {/* <Source src="https://media.w3.org/2010/05/sintel/trailer_hd.webm" type="video/webm" /> */} </Player> </div> ); }; export default VideoPlayer;

Debug

Known issues

breakingThe component named `PlaybackRate` was renamed to `PlaybackRateMenuButton` in version `0.7.0` to better reflect its functionality as a menu button. Code using the old name will break.

fix

Update imports and component usage from `PlaybackRate` to `PlaybackRateMenuButton`.

affects: >=0.7.0

gotchaVideo-React requires its CSS styles to be explicitly imported into your application for the player to render correctly. Without the CSS, the player will be unstyled and potentially non-functional.

fix

Add `import 'video-react/dist/video-react.css';` to your application's entry point or component where the player is used, or link it via HTML/SCSS.

affects: >=0.1.0

gotchaThe `video-react` package lists `react` and `react-dom` as peer dependencies. These must be installed separately in your project, ensuring their versions are compatible with the ranges specified by `video-react` to avoid conflicts or unexpected behavior.

fix

Install peer dependencies: `npm install --save react react-dom` (or `yarn add react react-dom`). Refer to `video-react`'s `package.json` for supported versions.

affects: >=0.1.0

gotchaVideo-React officially supports only the latest stable versions of major browsers (Chrome, Firefox, Edge, Safari on Mac/iOS, Android native browsers). Older browser versions or 'untested' environments (like IE11 or specific Linux/Android setups) may exhibit unexpected behavior or require custom polyfills.

fix

Ensure your target audience's browsers are within the supported range. For unsupported browsers, thorough testing and custom workarounds or alternative solutions might be necessary.

affects: >=0.1.0

Errors

Common errors & fixes

Module not found: Can't resolve 'video-react/dist/video-react.css'

The CSS file for `video-react` was not found at the specified path, often due to a typo or incorrect import statement.

fix

Verify the CSS import path: `import 'video-react/dist/video-react.css';`. Ensure `video-react` is correctly installed in `node_modules`.

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components)... Check the render method of `YourComponent`.

This error typically indicates that a `video-react` component, such as `Player` or `Source`, was not correctly imported or used where a React element was expected.

fix

Ensure `Player` and other `video-react` components are correctly imported using named imports (e.g., `import { Player } from 'video-react';`) and are used as JSX components `<Player>...</Player>`.

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

This error often occurs when attempting to call methods on the `Player` instance (e.g., using a ref) before the component has fully mounted or if the ref is not correctly assigned.

fix

Ensure you are using `useRef` (for function components) or creating a class ref, and that you are accessing player methods only after the component has mounted, typically within `useEffect` or `componentDidMount`.

Webpack compilation error: 'require' is not defined in ES module scope

Attempting to use CommonJS `require()` syntax in an ES Module (ESM) context, which is the standard for modern React applications.

fix

Replace all `require()` statements for `video-react` components with ES Module `import` statements (e.g., `import { Player } from 'video-react';`).

Upgrade

Version history

0.16.0latest on npm

Audit

Dependencies

reactrequiredRequired peer dependency for all React components within the library.

react-domrequiredRequired peer dependency for rendering React components to the DOM.

Agent activity

6 hits · last 30 days

node

Resources

githubhttps://github.com/video-react/video-react ↗

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

homepagehttps://video-react.js.org ↗