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|background-video> \
  --skin <default|minimal> \
  --media <html5-video|html5-audio|hls|background-video> \
  --source-url <url> \
  --install-method <cdn|npm|pnpm|yarn|bun>

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.
Skin : Pick what your player looks like
Media : Pick what kind of media you have
Source URL : Define where your media comes from (or omit for a sample URL)
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 your favorite JS and CSS frameworks. More to come.

React

HTML

Choose your use case

The default presets work well for general website playback. More pre-built players to come.

Video

Audio

Background Video

Choose skin

Choose how your player looks.

Default

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.

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/cdn/video.js"></script>

npm install @videojs/html

pnpm add @videojs/html

yarn add @videojs/html

bun add @videojs/html

Use your player

<!--
  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="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.

'use client';

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} playsInline />
      </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://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" />
    </div>
  );
};

CSP

If your application uses a Content Security Policy, you may need to allow additional sources for player features to work correctly.

Common requirements

media-src must allow your media URLs.
img-src must allow any poster or thumbnail image URLs.
connect-src must allow HLS manifests, playlists, captions, and segment requests when using HLS playback.
media-src blob: is required when using the HLS player variants, which use MSE-backed playback.
worker-src blob: is required when using the hls.js player variants.
style-src 'unsafe-inline' is currently required for some player UI and HTML player styling behavior.

Example

Content-Security-Policy:
  script-src 'self';
  style-src 'self' 'unsafe-inline';
  img-src 'self' https: data: blob:;
  media-src 'self' https: blob:;
  connect-src 'self' https:;
  worker-src 'self' blob:;

Choose your JS framework

Choose your use case

Choose skin

Choose your media source type

Install Video.js

Use your player

Create your player

Use your player

CSP

Common requirements

Example

See also