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 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.
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.
classlist - fp-left
parent - flowplayer-header
Container element, that occupies left half of its parent.
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.
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.
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.
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.