Components and player's states

Css properties of components change depending on the states of the player. For example, the opacity or display property of some components change when player is hovered. States of the player are reflected on the classlist property of player’s parent element. If you want to replace a flowplayer component with your own, but at the same time you want the keep the default styling behavior when player change state, you should add the default classlist of the component you want to replace, and then override the properties you're not interested in.

Different notes on components

Icon components

Flowplayer icon components are HTMLDivElement with icons used as background-images. The url’s of these images are variables that you can easily override with your own instead of defining your own icon-component. Also, Icon components click listeners are added inside their parents constructors, if they are core components, or inside a plugin, if they are plugin components. The only exceptions to this rule are, flowplayer-airplay-icon and flowplayer-chromecast-icon.Therefore, creating a flowplayer icon component means you have to handle click events on them, using one of the player methods or playlist api for flowplayer-skip-previous-icon and flowplayer-skip-next-icon.

Timeline component

If you define your own timeline component, for better UI performance of other components please make sure to update the state of the player when these events are triggered on timeline player.setState(flowplayer.events.SEEKING, true)

• mousemove, touchstart

  player.setState(flowplayer.events.SEEKING, true)

• mouseup, touchend

  player.setState(flowplayer.events.SEEKING, false)

  Livestreams sometimes trigger the seeking event on the player without interaction with timeline. It may be useful to listen to flowplayer.events.DVR and flowplayer.events.LIVE to adjust your timeline accordingly.

Menu components

All flowplayer menu components have the same structure. They consist of an HTMLDetailsElement and a menu inside it. The classlist property of the menu is fp-menu. If your intention is to use the default flowplayer menus but place them somewhere different from their normal position, you may have to override some of this class properties. If you want to create your own menu component, this class could also be helpful to use, as it makes menus fullscreen when the size of a device is small, with the necessary adjustments.