support Contact Support | system status System Status
Page Contents

    Overview: Components

    The Brightcove Player is built on top of a simple, custom UI components architecture. This topic provides a brief insight into the components and their structure.

    This is an overview document. For information about changing the components please see the Customize Player Appearance document.

    Components labeled

    Following are screenshots of the player, on player load and when playing back a video, with the components labeled.

    On player load and hover

    components on load

    During playback

    components playback

    For information on CSS selectors for these components see the Customize Player Appearance document's Component selectors section.

    Hierarchical structure

     

    The default, hierarchical component structure of the player is as shown:

    Player
      Player
          PosterImage
          TextTrackDisplay
          DockText
            DockTitle
            DockDescription
          DockShelf
          LoadingSpinner
          BigPlayButton
          ControlBar
            PlayToggle
            VolumePanelHorizontal
              MuteToggle
              VolumeControl
                VolumeBar
                  VolumeLevel
            CurrentTimeDisplay
            TimeDivider
            DurationDisplay
            ProgressControl
              ProgressHolder
              SeekBar
              LoadProgressBar
              PlayProgressBar
              SeekHandle
            LiveControl
            RemainingTimeDisplay
            Spacer
            PlaybackRate
            ChaptersButton
            DescriptionsButton
            SubtitlesCaptionsButton
            AudioTrackButton
            FullscreenToggle
          ErrorDisplayModal
          ModalDialog
          InfoModal
    

    You can also see the structure of the components by view the Elements tab of a browser's Dev Tools. You see the elements in the screenshot below. For example, highlighted in yellow are the ControlBar's child elements.

    elements in dev tools

    Definitions

    Definitions for key components are given in the following table:

    Component Description
    PosterImage The image displayed until the video starts playing
    TextTrackDisplay Text that is displayed as a separate track used for captions and subtitles (in WebVTT format)
    LoadingSpinner The animated spin wheel that displays until the video is loaded
    BigPlayButton The play button displayed within the area of button at load time
    ControlBar The container for all the main player controls
        PlayToggle The play button that toggles between play and pause
        MuteToggle The button to toggle between audio muted and not
            VolumeControl Slider bar to control the volume level
                VolumeLevel Displays the current volume level when hovering over the volume bar
                    VolumeHandle Shows the current position of the volume level and can be dragged to adjust the volume level
        CurrentTimeDisplay Current duration of played video displayed as mm:ss
        TimeDivider The forward slash '/' separating the current duration and the duration of the video
        DurationDisplay The overall duration of the video
        ProgressControl The component that contains the seek, load progress and play progress bars
            SeekBar Media bar which becomes active upon receiving the event that media has been fetched
            LoadProgressBar Indicates the progression of the video being fetched
            PlayProgressBar Indicates the progression of the video being played
            SeekHandle Shows the current position of the playhead during playback and can be dragged to adjust the playhead
        LiveControl Displays the word LIVE if streaming a live feed
        RemainingTimeDisplay Displays the duration of the video yet to be played
        Spacer Element inserted into the ControlBar especially for adding icons
        PlaybackRate Displays the playback rate
        ChaptersButton Button to display chapters
        CaptionsButton Toggle to display the caption settings form
        FullScreenToggle Button to toggle fullscreen display
    CaptionsSettings Form to display and alter caption settings
    DockText Container for the title and description
        DockTitle Title of the video
        DockDescription Short description of the video
    DockShelf Used by the social media plugin

    Class information

    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. When you add a child component, it inserts the element of that child into the element of the parent and allows you to manipulate the element as needed, as shown here:

    myButton = myPlayer.controlBar.addChild('Button');
    myButton.addClass('bc-download-button');
    myButton.on('click',function(){
      ...
    })

    Page last updated on 28 Sep 2020