FrameworkStyle

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. ( vote )[todo].

React
HTML

Choose your use case

The defaults work well for general website playback. More prebuilt players to come. ( vote )[todo]

Default Video
Default Audio
Background Video

Choose skin

Choose how your player looks.

Default Video
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. ( missing something? )

Select your source

Or upload your media for free to Mux

Drop a video— or —

Install Video.js 

npm install @videojs/react@next

Create your player

Add it to your components folder in a new file. 

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} />
      </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://example.com/video.mp4" />
    </div>
  );
};

That’s it! You now have a fully functional Video.js player. Go forth and play.

Something not quite right? You can submit an issue and ask for help, or explore other support options .