Installation

Install Video.js and build your first player with streaming support and accessible controls

Video.js is a React video player component library — composable primitives, hooks, and TypeScript types for building accessible, customizable players with minimal bundle size.

Answer the questions below to get started quickly with your first embed code.

Choose your JS framework

Video.js aims to provide idiomatic development experiences in your favorite JS and CSS frameworks. More to come.

React

HTML

Choose your use case

The default presets work well for general website playback. More pre-built players to come.

Video

Audio

Background Video

Choose skin

Choose how your player looks.

Default

Minimal

Choose your media source type

Video.js supports a wide range of file types and hosting services. It’s easy to switch between them.

Select your source

Enter the URL to a video to auto-detect

or select manually

Or upload your media for free to Mux

Drop a video— or —

Install Video.js

npm install @videojs/react

pnpm add @videojs/react

yarn add @videojs/react

bun add @videojs/react

Create your player

Add it to your components folder in a new file.

'use client';

import '@videojs/react/video/skin.css';
import { createPlayer, videoFeatures } from '@videojs/react';
import { VideoSkin, Video } from '@videojs/react/video';

const Player = createPlayer({ features: videoFeatures });

interface MyPlayerProps {
  src: string;
}

export const MyPlayer = ({ src }: MyPlayerProps) => {
  return (
    <Player.Provider>
      <VideoSkin>
        <Video src={src} playsInline />
      </VideoSkin>
    </Player.Provider>
  );
};

'use client';

import '@videojs/react/video/skin.css';
import { createPlayer, videoFeatures } from '@videojs/react';
import { VideoSkin, Video } from '@videojs/react/video';

const Player = createPlayer({ features: videoFeatures });

interface MyPlayerProps {
  src: string;
}

export const MyPlayer = ({ src }: MyPlayerProps) => {
  return (
    <Player.Provider>
      <VideoSkin>
        <Video src={src} playsInline />
      </VideoSkin>
    </Player.Provider>
  );
};

Use your player

import { MyPlayer } from '../components/player';

export const HomePage = () => {
  return (
    <div>
      <h1>Welcome to My App</h1>
      <MyPlayer src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" />
    </div>
  );
};

import { MyPlayer } from '../components/player';

export const HomePage = () => {
  return (
    <div>
      <h1>Welcome to My App</h1>
      <MyPlayer src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" />
    </div>
  );
};

CSP

If your application uses a Content Security Policy, you may need to allow additional sources for player features to work correctly.

Common requirements

media-src must allow your media URLs.
img-src must allow any poster or thumbnail image URLs.
connect-src must allow HLS manifests, playlists, captions, and segment requests when using HLS playback.
media-src blob: is required when using the HLS player variants, which use MSE-backed playback.
worker-src blob: is required when using the hls.js player variants.
style-src 'unsafe-inline' is currently required for some player UI and HTML player styling behavior.

Example

Content-Security-Policy:
  script-src 'self';
  style-src 'self' 'unsafe-inline';
  img-src 'self' https: data: blob:;
  media-src 'self' https: blob:;
  connect-src 'self' https:;
  worker-src 'self' blob:;