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
        FullscreenToggle
        CurrentTimeDisplay
        TimeDivider
        DurationDisplay
        RemainingTimeDisplay
        ProgressControl
            SeekBar
              LoadProgressBar
              PlayProgressBar
              SeekHandle
        VolumeControl
            VolumeBar
                VolumeLevel
                VolumeHandle
        MuteToggle

1.6 KiB Raw Blame History

Components

1.6 KiB

Raw Blame History