Installation

Get started quickly with Video.js by building your first embed code

Video.js is audio and video player components — intentionally built to achieve minimal bundle sizes while providing framework-specific customization and a great viewer experience . 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 on what’s next )[todo].

Choose your use case

The defaults work well for general website playback. More use case player presets to come.

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? )

Install Video.js

<script>
// don't need this, will be included in frosted
// import 'https://cdn.jsdelivr.net/npm/videojs/html/presets/website.js';
import 'https://cdn.jsdelivr.net/npm/videojs/html/presets/website/skins/frosted.js';
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/videojs/html/presets/website/skins/frosted.css" />

npm install @videojs/html

pnpm add @videojs/html

yarn add @videojs/html

bun add @videojs/html

npm install @videojs/react

pnpm add @videojs/react

yarn add @videojs/react

bun add @videojs/react

Use your player

import '@videojs/html/skins/default-video';

<!--
  The PlayerProvider passes state between the UI components
  and Media, and makes fully custom UIs possible.
  It does not have layout by default (display:contents)
 -->
<video-player>
  <!--
    Skins contain the entire player UI and are easily swappable.
    They can each be "ejected" for full control and customization
    of UI components.
   -->
  <video-skin>
    <!--
      Media are players without UIs, handling networking
      and display of the media. They are easily swappable
      to handle different sources.
    -->
    <video src="..."></video>
  </video-skin>
</video-player>

Create your player

Add it to your components folder in a new file.

import { createPlayer, presets, Video } from '@videojs/react';
import { VideoSkin } from '@videojs/react/presets/default-video';
import '@videojs/react/presets/default-video/skins/default-video.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. */}
      <VideoSkin>
        {/* Media are players without UIs, handling networking
            and display of the media.
            They are easily swappable to handle different sources. */}
        <Video src={src} />
      </VideoSkin>
    </PlayerProvider>
  );
};

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 .