FrameworkStyle

Architecture

Understanding the three-tier architecture of Video.js v10 - State, UI, and Renderers

Video.js v10 is built around a three-tier architecture that separates concerns and maximizes flexibility. Each tier is designed to work independently or together, allowing you to use as much or as little of Video.js as you need.

The Three Tiers

1. State Management

State is handled by VideoProvider, which creates a central store that all components can access. When you wrap your player in a VideoProvider, components automatically connect to the state. 

<VideoProvider>
  {/* All components inside automatically connect to state */}
</VideoProvider>

2. User Interface

Skins

Complete, pre-designed player UIs that package components and styles together:

  • Frosted (glassy design)
  • Minimal (clean, simple design)

Want to learn more? Read the skins guide →

Components

Most should use a skin as a starting point. However, if you want more control, you have two options.

First, you can use eject a skin to customize it. to learn more, check out our guide on customizing skins →

Next, you can use the individual, unstyled UI primitives, standalone or composed into custom designs:

  • Buttons (Play, Mute, Fullscreen)
  • Sliders (Time, Volume)
  • Displays (CurrentTime, Duration)
  • Compound components (Tooltip, Popover)

Want to dive deeper? Explore UI components →

3. Media Renderers

Media renderers are the components that actually display your media. They’re essentially “players with no UI”. They handle the video/audio rendering and expose a consistent API.

For now, we’ll have a default <Video /> component, which supports MP4 and other natively-supported streams and <HlsVideo />, which supports HLS. In the future, we’ll be adding additional support for streaming standards like DASH and services like YouTube and Vimeo.

How It All Works Together

Here’s a complete example showing all three tiers: 

import { VideoProvider, FrostedSkin, Video } from '@videojs/react';
import '@videojs/react/skins/frosted.css';

function Player() {
  return (
    // Tier 1: State Management
    <VideoProvider>
      {/* Tier 2: User Interface (Skin with components) */}
      <FrostedSkin>
        {/* Tier 3: Media Renderer */}
        <Video src="video.mp4" />
      </FrostedSkin>
    </VideoProvider>
  );
}
VideoJS