{"id":12361,"library":"video-react","title":"Video-React Player","description":"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.","status":"active","version":"0.16.0","language":"javascript","source_language":"en","source_url":"https://github.com/video-react/video-react","tags":["javascript","react","video","video-react","react-video","player","component","components","react-component"],"install":[{"cmd":"npm install video-react","lang":"bash","label":"npm"},{"cmd":"yarn add video-react","lang":"bash","label":"yarn"},{"cmd":"pnpm add video-react","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for all React components within the library.","package":"react","optional":false},{"reason":"Required peer dependency for rendering React components to the DOM.","package":"react-dom","optional":false}],"imports":[{"note":"The primary container component for the video player. Typically used with named imports.","wrong":"const { Player } = require('video-react');","symbol":"Player","correct":"import { Player } from 'video-react';"},{"note":"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.","wrong":"require('video-react/dist/video-react.css'); // While technically works in some bundlers, ESM import is idiomatic.","symbol":"CSS Styles","correct":"import 'video-react/dist/video-react.css';"},{"note":"Used as a child of the `Player` component to specify video sources. All sub-components are exported as named exports from the main package.","wrong":"import Source from 'video-react/lib/components/Source';","symbol":"Source","correct":"import { Player, Source } from 'video-react';"},{"note":"Commonly imported named component to customize the player's control bar and its sub-components (e.g., `PlayToggle`, `VolumeMenuButton`).","symbol":"ControlBar","correct":"import { Player, ControlBar, PlayToggle } from 'video-react';"},{"note":"This component was renamed from `PlaybackRate` to `PlaybackRateMenuButton` in `v0.7.0`. Ensure you use the correct name.","wrong":"import { PlaybackRate } from 'video-react';","symbol":"PlaybackRateMenuButton","correct":"import { PlaybackRateMenuButton } from 'video-react';"}],"quickstart":{"code":"import React from 'react';\nimport { Player, ControlBar, PlayToggle, VolumeMenuButton, BigPlayButton, Source } from 'video-react';\nimport 'video-react/dist/video-react.css'; // Don't forget to import the CSS\n\nconst VideoPlayer = () => {\n  return (\n    <div style={{ width: '80%', margin: '20px auto' }}>\n      <Player\n        playsInline\n        poster=\"https://video-react.github.io/assets/poster.png\"\n        src=\"https://media.w3.org/2010/05/sintel/trailer_hd.mp4\"\n      >\n        <BigPlayButton position=\"center\" />\n        <ControlBar autoHide={false} disableDefaultControls={false}>\n          <PlayToggle />\n          <VolumeMenuButton />\n          {/* Add other control bar components as needed */}\n        </ControlBar>\n        {/* You can also specify sources as children, for multiple formats */}\n        {/* <Source src=\"https://media.w3.org/2010/05/sintel/trailer_hd.mp4\" type=\"video/mp4\" /> */}\n        {/* <Source src=\"https://media.w3.org/2010/05/sintel/trailer_hd.webm\" type=\"video/webm\" /> */}\n      </Player>\n    </div>\n  );\n};\n\nexport default VideoPlayer;","lang":"javascript","description":"This quickstart demonstrates how to set up a basic Video-React player with common controls and a video source, including the essential CSS import."},"warnings":[{"fix":"Update imports and component usage from `PlaybackRate` to `PlaybackRateMenuButton`.","message":"The 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.","severity":"breaking","affected_versions":">=0.7.0"},{"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.","message":"Video-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.","severity":"gotcha","affected_versions":">=0.1.0"},{"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.","message":"The `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.","severity":"gotcha","affected_versions":">=0.1.0"},{"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.","message":"Video-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.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Verify the CSS import path: `import 'video-react/dist/video-react.css';`. Ensure `video-react` is correctly installed in `node_modules`.","cause":"The CSS file for `video-react` was not found at the specified path, often due to a typo or incorrect import statement.","error":"Module not found: Can't resolve 'video-react/dist/video-react.css'"},{"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>`.","cause":"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.","error":"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`."},{"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`.","cause":"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.","error":"TypeError: Cannot read properties of undefined (reading 'play')"},{"fix":"Replace all `require()` statements for `video-react` components with ES Module `import` statements (e.g., `import { Player } from 'video-react';`).","cause":"Attempting to use CommonJS `require()` syntax in an ES Module (ESM) context, which is the standard for modern React applications.","error":"Webpack compilation error: 'require' is not defined in ES module scope"}],"ecosystem":"npm"}