FrameworkStyle

UI components

Understanding Video.js v10's primitive-based component architecture

Video.js v10 components are built from unstyled UI primitives , taking inspiration from projects like shadcn/ui and Base UI . This approach gives you control over styling and behavior while handling the complex interactions for you.

Core principles

1. Primitive-based design

Each primitive represents at most one HTML element , without internal elements. 

<media-time-slider>
  <div class="track">        <!-- One element: the track -->
    <div class="progress"></div>  <!-- One element: the progress bar -->
    <div class="pointer"></div>   <!-- One element: hover indicator -->
  </div>
  <div class="thumb"></div>       <!-- One element: the draggable thumb -->
</media-time-slider>

2. Compound components

Complex components are broken into smaller, composable pieces. This pattern is used for:

  • Sliders - Root, Track, Thumb, Progress, Pointer
  • Tooltips - Root, Trigger, Positioner, Popup
  • Popovers - Root, Trigger, Positioner, Popup

Each piece handles one concern, but they work together seamlessly.

3. Built-in accessibility

Components include proper ARIA attributes, keyboard navigation, and focus management out of the box:

  • Buttons have correct roles and labels
  • Sliders support arrow key navigation
  • Focus is managed properly in tooltips and popovers
  • Screen readers get meaningful announcements

4. Data attributes for styling

Components expose state through data attributes, allowing pure CSS state styling: 

/* Style based on state without JavaScript */
button[data-paused] {
  /* Paused state */
}

button:not([data-paused]) {
  /* Playing state */
}

Common data attributes:

  • data-paused - Present when media is paused
  • data-muted - Present when audio is muted
  • data-fullscreen - Present when in fullscreen mode
  • data-volume-level - Values: high, medium, low, off

Available components

Simple components

Single-element components that handle one piece of UI:

Compound components

Multi-element components for complex interactions

VideoJS