Video.js 10 for React

Video.js 10 ships as @videojs/react. The video.js package on npm is still Video.js 8.

NPM

Install Video.js and the Mux video adapter used in this example

npm install @videojs/react @videojs/mux-video

Basic example

The player on the home page. Use Video from @videojs/react/video instead of MuxVideo to play a plain MP4 file. See the installation guide for other sources and skins.

import '@videojs/react/video/skin.css';
// The /spf entry uses Video.js's own streaming engine instead of hls.js, which
// roughly halves the bundle. Use '@videojs/react/media/mux-video' for hls.js.
import { MuxVideo } from '@videojs/react/media/mux-video/spf';
import { VideoPlayer, VideoSkin } from '@videojs/react/video';

// "View From A Blue Moon" trailer, hosted on Mux.
const playbackId = 'lyrKpPcGfqyzeI00jZAfW6MvP6GNPrkML';
const poster = `https://image.mux.com/${playbackId}/thumbnail.webp?time=133`;

export default function Player() {
  return (
    <VideoPlayer title="View From A Blue Moon" poster={poster}>
      <VideoSkin>
        <MuxVideo source={{ playbackId }} playsInline crossOrigin="anonymous" />
      </VideoSkin>
    </VideoPlayer>
  );
}

Migrating from Video-React

The Migrate from Video-React guide maps Player props, control bar children, the player ref, and Redux state to Video.js 10. Check its "Known gaps" section against the features you use before you switch.

Using a coding agent? Paste the prompt from the guide's AI Quickstart section into your agent.

Video-React

These docs are kept for existing projects. Video-React only receives security fixes until January 2028.

NPM

Install video-react and peer dependencies via NPM

npm install --save video-react react react-dom redux

Basic example

The basic player

import css in your app or add video-react styles in your page

import "node_modules/video-react/dist/video-react.css"; // import css

@import "~video-react/styles/scss/video-react"; // or import scss

<link rel="stylesheet" href="/css/video-react.css" />

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

export default props => {
  return (
    <Player
      playsInline
      poster="/assets/poster.png"
      src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4"
    />
  );
};

View Components

Development

Install dependencies:

npm install

Run examples at http://localhost:9000/ with webpack dev server:

npm start

Run tests & coverage report:

npm test