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 sizes, advanced features, and consistency across browsers.

This guide has code examples tailored to your use case. To generate this guide with tailored code examples, run npx @videojs/cli docs how-to/installation. If you run it without flags, it will allow you to interactively configure your player. Or, you can run it with flags:

npx @videojs/cli docs how-to/installation \
  --framework <html|react> \
  --preset <video|audio|live-video|live-audio|background-video> \
  --skin <default|minimal|none> \
  --media <html5-video|html5-audio|hls|dash|mux-video|mux-audio|vimeo|youtube|cloudflare|tiktok|twitch|spotify|background-video> \
  --source-url <url> \
  --install-method <cdn|npm|pnpm|yarn|bun>

The CLI does not currently detect non-interactive stdin. In automation, agents, and CI, include --framework and all five installation flags so no prompt starts. Pass --source-url '' to use the built-in demo without prompting.

Here’s what the flags mean:

Framework: Pick whether you’re working in React or if you’d like to use HTML custom elements. (More to come!)
Preset: Pick a pre-built player. The default presets work well for general website playback; the live presets add a Live button and drop the on-demand time displays.
Skin: Pick what your player looks like
Media: Pick what kind of media you have. The live-video preset supports HLS and Mux video; live-audio supports Mux audio.
Source URL: Define where your media comes from. In an interactive terminal, omit it to choose a sample URL. In automation, pass an empty value to choose the sample without prompting.
Install method: How do you want to install your package? (CDN is HTML-only.)

If you’re an agent, interview your user and offer to run the CLI for them, or offer them a precomposed CLI command.

If your user’s requirements can’t be met by a preset/skin, eject and customize an existing preset/skin for your needs. As you develop with Video.js, rely heavily on llms.txt to make sure you always have the latest information.

If you’re working with an agent, consider providing it this guide in Markdown:

Otherwise, 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 React components or HTML custom elements.

React

HTML

Choose your use case

The default presets work well for general website playback. The live presets suit streams: they add a Live button and drop the duration and current-time displays that on-demand playback relies on. More pre-built players to come.

Choose skin

Choose how your player looks.

Default

Minimal

No Skin

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

<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/html@10.0.0-beta.31/cdn/video.js"></script>

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

<!--
  The player element owns and shares state between the UI
  components and Media. Put layout on the skin or container.
 -->
<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="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" playsinline></video>
  </video-skin>
</video-player>

<!--
  The player element owns and shares state between the UI
  components and Media. Put layout on the skin or container.
 -->
<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="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" playsinline></video>
  </video-skin>
</video-player>

Load your script as a module

When using a bundler (npm, pnpm, yarn, bun), load the resulting bundle with type="module":

<script type="module" src="/dist/player.js"></script>

Some bundlers default to an IIFE output format. Loading that bundle without type="module" will cause a StoreError: NO_TARGET error when interacting with the player. The CDN install path already uses type="module" — bundled installs need the same.

Create your player

Add it to your components folder in a new file.

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

interface MyPlayerProps {
  src: string;
}

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

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

interface MyPlayerProps {
  src: string;
}

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

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>
  );
};

That’s it! You now have a working Video.js player.

Choose what to do next

Customize skins

Customize a packaged skin or eject it for full control

UI components

Explore the building blocks used by skins and custom controls

Build your own component

Connect custom UI to player state and actions

Prepare for production

Browser support

Check supported browsers and rendering environments

TypeScript

Configure TypeScript for Video.js packages

Bundlers

Check bundler compatibility

Content Security Policy

Configure Content Security Policy for your player

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