Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/videojs/v10/llms.txt

Use this file to discover all available pages before exploring further.

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