Overview

How Video.js players are structured — state, UI, and media

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

1. State management

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

<Player.Provider>
  {/* All components inside automatically connect to state */}
</Player.Provider>

You can access state and actions from anywhere within the provider with the usePlayer hook.

State is handled by a video-player element, which creates a central state store that all components can access. Child components can automatically connect to the state of the video-player element.

<video-player>
  <!-- All components inside automatically connect to state -->
</video-player>

You can access state and actions from anywhere within <video-player> with PlayerController.

Learn more about state and actions

2. User interface

Use a prebuilt skin or build your own from the individual UI components .

Skins

Skins are complete, pre-designed player UIs that package components and styles together:

<video-player>
  <video-skin>
    <video slot="media" src="video.mp4"></video>
  </video-skin>
</video-player>

Learn more about skins

UI components

If you want more control than skins offer you, you can build your own UI from our components.

<video-player>

  <media-container>
    <video slot="media" src="video.mp4"></video>
    <media-controls>
      <media-play-button></media-play-button>
      <!-- ... -->
    </media-controls>
  </media-container>

</video-player>

To get started with UI components, you might consider ejecting a skin and using its pre-styled components as a foundation.

Learn more about UI components

3. Media

Media components 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.

Media components can be format specific (HLS, DASH), service specific (YouTube, Vimeo, Mux), or use case specific (background video).

Media elements are detected via a slot="media" attribute. Always include it on your <video>, <audio>, or custom media element.

<video-player>
  <video-skin>

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

  </video-skin>
</video-player>

Presets

Presets preconfigure these parts for a specific use case.

The default presets are /video and /audio, covering the baseline set of controls you’d expect from the HTML <video> and <audio> tags.

Beyond the defaults, presets target more specific use cases. For example, /background includes a media element with autoplay, mute, and loop built in, a skin with no controls, and just the features needed to power it:

import { createPlayer } from '@videojs/react';
import { backgroundFeatures, BackgroundVideo, BackgroundVideoSkin } from '@videojs/react/background';

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

function Hero() {
  return (
    <Player.Provider>
      <BackgroundVideoSkin>
        <BackgroundVideo src="hero.mp4" />
      </BackgroundVideoSkin>
    </Player.Provider>
  );
}

<script type="module">
  import '@videojs/html/background/player';
  import '@videojs/html/background/video';
  import '@videojs/html/background/skin';
  import '@videojs/html/background/skin.css';
</script>

<background-video-player>
  <background-video-skin>
    <background-video slot="media" src="hero.mp4"></background-video>
  </background-video-skin>
</background-video-player>

Learn more about presets