Installation

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

Video.js is an HTML video player built on custom elements: lightweight, framework-free components 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 a preset and skin do not meet your user’s requirements, follow Customize skins to eject the closest skin. 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

Complete the installation steps below, then visit the guide for your framework for more detailed integration information. These guides use the HTML custom elements until we add first-party Vue and Svelte packages.

Vue and Nuxt

Svelte and SvelteKit

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/cdn@10.0.0-beta.32/video.js"></script>

npm install @videojs/html

pnpm add @videojs/html

yarn add @videojs/html

bun add @videojs/html

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>

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

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

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

Change the skin’s controls or layout

To add, remove, or rearrange the skin you selected, eject it into your project. If your project does not have a components.json file, set up the CLI first. Then choose how you want the skin’s styles written and run the command below to copy its files:

HTML skins install as vanilla CSS.

npx shadcn@latest registry add @videojs=https://shadcn.videojs.org/r/html/{name}.json
npx shadcn@latest add @videojs/video

Customize skins

Learn which files to edit and how to update your copy later

Choose what to do next

Customize skins

Change colors, typography, sizing, and poster presentation

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

CDN

See every bundle the CDN serves and the layout rules behind the URLs

Self-host the player

Serve the player from your own origin for offline or restricted-network deployments

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