Core components

Table of contents

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 any of the player's plugins.

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

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. Container element, that has 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 which describes the error.

flowplayer-header

classlist - fp-header

parent - flowplayer-ui

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

flowplayer-header-left-zone

classlist - fp-left

parent - flowplayer-header

Container element, that occupies left half of its parent.

flowplayer-header-duration

classlist - fp-duration

parent - flowplayer-header-left-zone

Visible only when autoplay option is set to false, before 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 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 player and almost 3/4 of its height. Its top edge is the same with bottom edge of flowplayer-header. Handles touch and click events, that change playback state of player or make player fullscreen.

flowplayer-middle-left-zone

classlist - fp-left-zone

parent - flowplayer-middle

Container element, that occupies 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 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 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 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 player, and it's bottom edge is the same with flowplayer-middle top edge.

flowplayer-control-buttons

classlist - fp-btns fp-small-switch

parent - flowplayer-control

Wraps up 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

textContent property of this element, 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.

Web components Plugin components
Results