Video.js v10

Modern, modular media player framework for Web and React. Composable features, prebuilt skins, and built-in HLS/DASH streaming.

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

React

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

React

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

HTML

<script type="module">
  import '@videojs/html/video/player';
  import '@videojs/html/video/skin';
  import '@videojs/html/video/video';
</script>
<link rel="stylesheet" href="node_modules/@videojs/html/video/skin.css" />

<video-player>
  <video-skin>
    <hls-video slot="media" src="https://stream.mux.com/example.m3u8"></hls-video>
  </video-skin>
</video-player>

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.