This documentation is for an outdated version of Video.js. See documentation for the current release.

# 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.registerComponent('Control', videojs.extends(Component));
    videojs.registerComponent('Button', videojs.extends(videojs.getComponent('Control')));
    videojs.registerComponent('PlayToggle', videojs.extends(videojs.getComponent('Button')));

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
            VolumeMenuButton
            CurrentTimeDisplay (Hidden by default)
            TimeDivider (Hidden by default)
            DurationDisplay (Hidden by default)
            ProgressControl
                SeekBar
                  LoadProgressBar
                  MouseTimeDisplay
                  PlayProgressBar
            LiveDisplay (Hidden by default)
            RemainingTimeDisplay
            CustomControlsSpacer (No UI)
            ChaptersButton (Hidden by default)
            SubtitlesButton (Hidden by default)
            CaptionsButton (Hidden by default)
            PictureInPictureToggle
            FullscreenToggle
        ErrorDisplay
        TextTrackSettings

## Progress Control

The progress control is made up of the SeekBar. The seekbar contains the load progress bar and the play progress bar. In addition, it contains the Mouse Time Display which is used to display the time tooltip that follows the mouse cursor. The play progress bar also has a time tooltip that show the current time.

By default, the progress control is sandwiched between the volume menu button and the remaining time display inside the control bar, but in some cases, a skin would want to move the progress control above the control bar and have it span the full width of the player, in those cases, it is less than ideal to have the tooltips get cut off or leave the bounds of the player. This can be prevented by setting the `keepTooltipsInside` option on the progress control. This also makes the tooltips use a real element instead of pseudo elements so targeting them with css will be different.

    let player = videojs('myplayer', {
      controlBar: {
        progressControl: {
          keepTooltipsInside: true
        }
      }
    });