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 the player is hovered over. States of the player are reflected on the classlist property of the player’s parent element. If you want to replace a Wowza Flowplayer component with your own, but, at the same time you want to keep the default styling behavior when the player changes state, you should add the default classlist of the component you want to replace, then override the properties you're not interested in.

Notes on components

Icon components

Wowza 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
  Copy

  Copied

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

• mouseup , touchend
  Copy

  Copied

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

  Info

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

Menu components

All Wowza 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 than their normal position, you may have to override some of the 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.