Core components

Core components are the components that comprise the backbone of the player. This means that they are part of every player's instance, regardless of the usage of any of the player's plugins.

Copy

Copied

root
  player
  flowplayer-ui
    flowplayer-header
      flowplayer-header-left-zone
        flowplayer-header-duration
      flowplayer-header-right-zone
        flowplayer-fullscreen-enter-icon
        flowplayer-fullscreen-exit-icon
    flowplayer-middle
      flowplayer-middle-left-zone
        flowplayer-rewind-icon
      flowplayer-middle-zone
        flowplayer-wait
        flowplayer-middle-buttons
          flowplayer-play-icon
          flowplayer-pause-icon
      flowplayer-middle-right-zone
        flowplayer-fast-forward-icon
    flowplayer-control
      flowplayer-control-buttons
        flowplayer-small-pause-icon
        flowplayer-small-play-icon
      flowplayer-live-status
      flowplayer-elapsed-time
      flowplayer-timeline-bar
      flowplayer-control-duration
      flowplayer-volume-control
        flowplayer-volume-icon
        flowplayer-volume-bar

Info

Core components are all added to the DOM tree at the same time, which is when the top level component flowplayer-ui is appended to player’s root. Each component inside its constructor creates and appends its children components. Consequently, by overriding one component which is parent to other components, none of these children will be created, unless you do so.

flowplayer-ui

classlist - fp-ui

Top level component. All the other components are either children or descendants of this element. This is a container element with the same size as player.

flowplayer-error

classlist - fp-error
parent - fp-ui

An element that is appended when the error event is fired on the player and displays a message that describes the error.

Header

flowplayer-header

classlist - fp-header
parent - flowplayer-ui

Container element that has the same width as player and its top edge is the same as the player's top edge.

flowplayer-header-left-zone

classlist - fp-left
parent - flowplayer-header

Container element that occupies the left half of its parent.

flowplayer-header-duration

classlist - fp-duration
parent - flowplayer-header-left-zone

Visible only when the autoplay option is set to false, before the player starts playing. TextContent property of the element is video's duration.

flowplayer-header-right-zone

classlist - fp-right fp-togglable
parent - flowplayer-header

Container element that occupies the right half of its parent.

flowplayer-fullscreen-enter-icon

classlist - fp-fullscreen
parent - flowplayer-header-right-zone

Fullscreen icon.

flowplayer-fullscreen-exit-icon

classlist - fp-fullscreen-exit
parent - flowplayer-header-right-zone

Fullscreen exit icon.

Middle

flowplayer-middle

classlist - fp-middle
parent - flowplayer-ui

Container element that has the same width as the player and almost 3/4 of its height. Its top edge is the same as the bottom edge of flowplayer-header. Handles touch and click events that change the playback state of player or make the player fullscreen.

flowplayer-middle-left-zone

classlist - fp-left-zone
parent - flowplayer-middle

Container element that occupies the left 1/3 of its parent. Handles touch events that seek player's media backwards.

flowplayer-rewind-icon

classlist - fp-rewind
parent - flowplayer-middle-left-zone

Rewind icon.

flowplayer-middle-zone

classlist - fp-middle-zone
parent - flowplayer-middle

Container element that occupies the middle 1/3 of its parent.

flowplayer-wait

classlist - fp-wait
parent - flowplayer-middle-zone

The standard animation element that is visible when a player is either in waiting or seeking state.

flowplayer-middle-buttons

classlist - fp-switch
parent - flowplayer-middle-zone

Wraps up play/pause icon and switches opacity depending on playback state of the media.

flowplayer-play_icon

classlist - fp-play
parent - flowplayer-middle-buttons

Play icon.

flowplayer-pause_icon

classlist - fp-pause
parent - flowplayer-middle-buttons

Pause icon.

flowplayer-middle-right-zone

classlist - fp-right-zone
parent - flowplayer-middle

Container element that occupies the right 1/3 of its parent. Handles touch events that seek player's media forward.

flowplayer-fast-forward-icon

classlist - fp-fast-rorward
parent - flowplayer-middle-right-zone

Fast-forward icon.

Controls

flowplayer-control

classlist - fp-controls fp-togglable
parent - flowplayer-ui

Container element that has the same width as the player and it's bottom edge is the same as the flowplayer-middle top edge.

flowplayer-control-buttons

classlist - fp-btns fp-small-switch
parent - flowplayer-control

Wraps up the play/pause icon and switches opacity depending on playback state of the media.

flowplayer-small-pause-icon

classlist - fp-small-pause
parent - flowplayer-control-buttons

Small pause icon.

flowplayer-small-play-icon

classlist - fp-small-play
parent - flowplayer-control-buttons

Small play icon.

flowplayer-live-status

classlist - fp-live-status
parent - flowplayer-control

Visible only on live streams. This element indicates if a stream is live or seeked, and, when clicked, forces media to go live.

flowplayer-elapsed-time

classlist - fp-elapsed
parent - flowplayer-control

Text content property of this element equals the elapsed time of the media that is played by the player.

flowplayer-timeline-bar

classlist - fp-timeline fp-bar
parent - flowplayer-control

Timeline bar.

flowplayer-control-duration

classlist - fp-duration
parent - flowplayer-control

The textContent property of this element, which equals the duration of the media that is played by the player.

flowplayer-volume-control

classlist - fp-volume-control
parent - flowplayer-control

Container element that wraps volume icon and volume bar.

flowplayer-volume-icon

classlist - fp-volume-mute-unmute fp-volumebtn
parent - flowplayer-volume-control

Volume icon.

flowplayer-volume-bar

classlist - fp-volume
parent - flowplayer-volume-control

Volume bar.