Video-React Player

Common errors

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

  cause 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`.

  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.
  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')

  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.
  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

  cause 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';`).

Warnings

• breaking 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.
  Fix: Update imports and component usage from `PlaybackRate` to `PlaybackRateMenuButton`.
• gotcha 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.
  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.
• gotcha 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.
  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.
• gotcha 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.
  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.

Install

• npm install video-react npm
• yarn add video-react yarn
• pnpm add video-react pnpm

Imports

• Player
  wrong:

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

  correct:

  import { Player } from 'video-react';

  The primary container component for the video player. Typically used with named imports.
• CSS Styles
  wrong:

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

  correct:

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

  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
  wrong:

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

  correct:

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

  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
  wrong:

  import { PlaybackRate } from 'video-react';

  correct:

  import { PlaybackRateMenuButton } from 'video-react';

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

Quickstart

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;