Skip to main content
Beta — Video.js v10 is close to stable. The API may evolve with feedback. See the Changelog and Roadmap for details.
Video.js v10 is a ground-up rewrite built around three ideas: composable features, multi-platform support (React and HTML custom elements), and a TypeScript-first API that tree-shakes down to only what you use.

Quickstart

Get a working player in under 5 minutes with React or HTML custom elements.

Core Concepts

Understand features, presets, skins, and the three-part architecture.

React Guide

Build a fully custom player with React hooks and components.

HTML Guide

Use framework-free custom elements in any web project.

​
What’s new in v10

Video.js v10 is a complete rewrite that addresses the architectural constraints of v7/v8. The key changes:

Composable features

Features are self-contained units of state and actions. Only include what your player needs — playback, volume, time, fullscreen, PiP, text tracks, and more.

React-native support

First-class React components with hooks, context, and TypeScript generics. Minimal re-renders via selector-based subscriptions.

HTML custom elements

Framework-free web components that work in any environment. Use the CDN or npm, with automatic state reflection via data attributes.

TypeScript-first

Full type safety across the entire API surface. Generic player types inferred from your feature set.

Tree-shakeable

Import only the features and components you use. No global registrations, no side effects unless you want them.

HLS & DASH built-in

First-class HLS (via hls.js) and DASH (via dash.js) support without additional plugins.

​
Install

npm install @videojs/react
Or use the CDN for HTML custom elements: 
<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/html/cdn/video/player.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@videojs/html/cdn/video/skin.css" />

​
Quick example

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

const Player = createPlayer({ features: videoFeatures });

export function MyPlayer() {
  return (
    <Player.Provider>
      <VideoSkin>
        <Video src="https://stream.mux.com/example.m3u8" />
      </VideoSkin>
    </Player.Provider>
  );
}

​
Packages

@videojs/react

React components, hooks, and context for building players in React.

@videojs/html

HTML custom elements for framework-free player development.

@videojs/core

Runtime-agnostic core logic, features, and DOM bindings.

@videojs/store

Reactive state management with selector-based subscriptions.

@videojs/spf

Stream Processing Framework for HLS and DASH.

@videojs/utils

Shared utilities for DOM, events, and type predicates.

​
Community

Discord

Join the Video.js community for help and discussion.

GitHub

Report issues, request features, or contribute to the project.

Build docs developers (and LLMs) love

Get started for freeTalk to us