Table of contents
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
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
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-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
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)
Livestreams sometimes trigger the seeking event on the player without interaction with timeline. It may be useful to listen to
flowplayer.events.LIVEto adjust your timeline accordingly.
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.