Skip to main content
Video.js v10 is currently in beta. The API may evolve based on feedback. See the Changelog for recent updates.
Video.js v10 ships as two separate packages depending on your environment:
  • @videojs/react — React component library with hooks and typed stores
  • @videojs/html — Custom elements library for framework-free environments

​
Install

npm install @videojs/react
@videojs/react requires React 16.8 or later as a peer dependency.

​
CDN (HTML only)

For HTML environments you can also load @videojs/html directly from a CDN without a build step.
index.html
<!-- Custom elements + player logic -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/html/cdn/video/player.js"></script>

<!-- Default video skin CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@videojs/html/cdn/video/skin.css" />

<video-player>
  <video-skin>
    <video slot="media" src="https://example.com/movie.mp4" controls></video>
  </video-skin>
</video-player>

​
TypeScript

Both packages are written in TypeScript and ship declaration files. No additional configuration is required — types are included automatically when you install. 
import { createPlayer } from '@videojs/react';
import { videoFeatures } from '@videojs/react/video';

// Player is fully typed based on the features you pass
const Player = createPlayer({ features: videoFeatures });

​
Peer dependencies

PackagePeer dependency
@videojs/reactreact >= 16.8.0
@videojs/htmlNone

​
Next steps

React integration

Set up a player in a React app with components and hooks.

HTML custom elements

Use Video.js in any HTML page or framework-free project.

Media sources

Add HLS, DASH, and other media sources to your player.

Custom features

Compose and extend the player’s feature set.

Build docs developers (and LLMs) love

Get started for freeTalk to us