# Architecture

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

Video.js v10 separates player responsibilities into parts that work independently or together, so you can use as much or as little of Video.js as you need.

For the reasoning behind this design, see [Why Video.js?](https://videojs.org/docs/framework/html/guides/why-videojs).

## State management

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.

```html
<!-- All components inside automatically connect to state -->
<video-player>
  <video-skin>
    <video src="video.mp4"></video>
  </video-skin>
</video-player>
```

You can access state and actions from anywhere within `<video-player>` with [`PlayerController`](https://videojs.org/docs/framework/html/reference/api/player-controller).

- [Learn more about state and actions](https://videojs.org/docs/framework/html/guides/features)

## 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. They give you a polished starting point, with a small set of CSS custom properties for common visual changes. They don’t try to cover every player with options.

```html
<video-player>
  <video-skin>
    <video src="video.mp4"></video>
  </video-skin>
</video-player>
```

- [Learn more about skins](https://videojs.org/docs/framework/html/guides/skins)

### UI components

If you want more control than a packaged skin offers, build your own UI from our components. Add, remove, and rearrange them to build the player you need.

```html
<video-player>
  <media-container>
    <video src="video.mp4"></video>
    <media-controls>
      <media-controls-content>
        <media-play-button></media-play-button>
        <!-- ... -->
      </media-controls-content>
    </media-controls>
  </media-container>
</video-player>
```

Skin source is a practical foundation for custom UI because it provides the same styled components as the packaged version. See [Customize skins](https://videojs.org/docs/framework/html/guides/customize-skins#style-skin-source) to add it to your project.

- [Learn more about UI components](https://videojs.org/docs/framework/html/guides/ui-components)
- [Build your own component](https://videojs.org/docs/framework/html/guides/build-your-own-component)

## 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 discovered automatically. Plain `<video>` and `<audio>` elements are found via a `querySelector`. Custom media elements like `<hlsjs-video>` register themselves after you import their registration entry point.

```html
<video-player>
  <video-skin>
    <hlsjs-video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8"></hlsjs-video>
  </video-skin>
</video-player>
```

- [Learn more about media](https://videojs.org/docs/framework/html/guides/media-sources)

## Extensions

Extensions add behavior to a player without rendering UI or playing media themselves.

```html
<video-player>
  <video-skin>
    <mux-video src="https://stream.mux.com/PLAYBACK_ID.m3u8"></mux-video>
    <mux-data></mux-data>
    <google-cast></google-cast>
  </video-skin>
</video-player>
```

An extension can provide behavior that a UI component controls: `<google-cast>` supplies the configurable Cast route, and [`<media-cast-button>`](https://videojs.org/docs/framework/html/reference/components/cast-button) renders the control that starts and ends a session.

## Presets

**Presets** preconfigure the state, UI, and media for a specific use case. Extensions stay opt-in, so add them to a preset player when you need them.

The default presets are `@videojs/html/video` and `@videojs/html/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. The `/background` preset combines a media element with autoplay, mute, and loop built in, a skin with no controls, and only the features needed to power it.

You can use it from the `@videojs/html/background/*` registration entry points.

- [Learn more about presets](https://videojs.org/docs/framework/html/guides/presets)

## Related pages

### Guides

- [Installation](https://videojs.org/docs/guides/installation/html): Install Video.js packages and build an accessible, customizable video player with composable controls
- [Features](https://videojs.org/docs/framework/html/guides/features): The state and actions each feature adds to the player
- [Skins](https://videojs.org/docs/framework/html/guides/skins): Packaged player designs that include both UI components and their styles.
- [Presets](https://videojs.org/docs/framework/html/guides/presets): Pre-packaged player configurations that bundle state management, skins, and media elements for specific use cases.

---

HTML documentation: https://videojs.org/docs/framework/html/llms.txt
All documentation: https://videojs.org/llms.txt