components.md

Components

The Video.js player is built on top of a simple, custom UI components architecture. The player class and all control classes inherit from the Component class, or a subclass of Component.

videojs.Control = videojs.Component.extend();
videojs.Button = videojs.Control.extend();
videojs.PlayToggle = videojs.Button.extend();

The UI component architecture makes it easier to add child components to a parent component and build up an entire user interface, like the controls for the Video.js player.

// Adding a new control to the player
myPlayer.addChild('BigPlayButton');

Every component has an associated DOM element, and when you add a child component, it inserts the element of that child into the element of the parent.

myPlayer.addChild('BigPlayButton');

Results in:

    <!-- Player Element -->
    <div class="video-js">
      <!-- BigPlayButton Element -->
      <div class="vjs-big-play-button"></div>
    </div>

The actual default component structure of the Video.js player looks something like this:

Player
    PosterImage
    TextTrackDisplay
    LoadingSpinner
    BigPlayButton
    ControlBar
        PlayToggle
        FullscreenToggle
        CurrentTimeDisplay
        TimeDivider
        DurationDisplay
        RemainingTimeDisplay
        ProgressControl
            SeekBar
              LoadProgressBar
              PlayProgressBar
              SeekHandle
        VolumeControl
            VolumeBar
                VolumeLevel
                VolumeHandle
        MuteToggle