FrameworkStyle

Installation

Get started with Video.js v10 by choosing your framework, skin, and media renderer

Video.js is beautifully crafted, accessible media player components; packed with powerful features; tuned for high-performance; intentionally built for your favorite frameworks; compatible with the media formats and hosting services you love.

Get started quickly with a selection of great presets and skins, then extend and customize to your hearts content.

Choose your JS framework

Video.js provides idiomatic experiences in both React and HTML Web Components.

Choose your use case

Use case presets get you started closer to your desired player without wrangling plugins. The default is the Website Player preset, which comes with a complete set of features for simple video playback on your site.

Choose your media renderer

Media are like players without the UI. Pick the one that matches your video or audio files and hosting. They can easily be changed later.

Select your source

Or upload your media for free to Mux

Drop a video— or —

Install your player 

npm install @videojs/react

Create your player 

// [your project] ./components/player/index.tsx
import { createPlayer, presets, Video } from '@videojs/react';
import { FrostedVideoSkin } from '@videojs/react/presets/website';
import '@videojs/react/presets/website/skins/frosted.css';

interface MyPlayerProps {
  src: string;
}

// Set up the player state features
const { PlayerProvider } = createPlayer(presets.website);

export const MyPlayer = ({ src }: MyPlayerProps) => {
  return (
    {/* The Provider passes state between the UI components
        and the Media, and makes fully custom UIs possible.
        Does not render its own HTML element. */}
    <PlayerProvider>
      {/* Skins contain the entire player UI and are easily swappable.
          They can each be "ejected" for full control and customization
          of UI components. */}
      <FrostedVideoSkin>
        {/* Media are players without UIs, handling networking
            and display of the media.
            They are easily swappable to handle different sources. */}
        <Video src={src} />
      </FrostedVideoSkin>
    </PlayerProvider>
  );
};

Use your player 

// HomePage.tsx
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.

VideoJS