Plugin components

Core web components are associated with the main Wowza Flowplayer package and provide the building blocks to create the player's user interface. They define the essential components that make up the core player controls, such as volume, seek, play, pause, and fullscreen elements.

Plugin components extend the functionality of core components and allow you to customize plugin-specific UI elements. They hook into the parent core element and alter it to achieve a desired effect. For example, the speed or quality selection plugin components can be leveraged to add speed and quality options to the player's core control bar.

Info

Each of the plugin components on this page is associated with one of the player plugins. To define a plugin component, you have to configure the player with the associated plugin first.

Advertising

flowplayer-ad-ui

classlist - fp-ad-ui
parent - player's root element

A container component where ads are rendered.

flowplayer-ad-controls

classlist - fp-ad-controls
parent - flowplayer-ad-ui

The control bar of the ad's user interface component.

flowplayer-ad-countdown

classlist - fp-ad-countdown
parent - flowplayer-ad-ui

Displays the progress of a linear ad.

flowplayer-ad-indicator

When used with the Advertising plugin, this component displays an ad counter (ADS 1 / 3) in the bottom left of the player. The counter indicates how many ads remain until returning to the main video content.

classlist - ad-indicator (added to the child div element)
parent - flowplayer-ad-controls

Copy

Copied

<flowplayer-ad-controls class="fp-ad-controls">
  <flowplayer-ad-indicator position="1" totals="1">
    <div class="ad-indicator fp-color-text">ADS 1 / 1</div>
  </flowplayer-ad-indicator>
</flowplayer-ad-controls>
<flowplayer-ad-countdown duration="10" remaining="7.5224329999999995" class="go" style="--ad-percent-previous:19.971; --ad-percent-complete:22.705;">
</flowplayer-ad-countdown>

With Web Components, you can add your own implementation and register a custom class to override this plugin component. This strategy can be useful when creating an ad-countdown div to display the number of seconds until playback continues. You can adjust the placement of the ad countdown with CSS.

Copy

Copied

<flowplayer-ad-controls class="fp-ad-controls">
  <custom-ad-indicator>
    <div class="ad-counter ad-indicator fp-color-text">ADS 1 / 1</div>
  </custom-ad-indicator>
</flowplayer-ad-controls>
<flowplayer-ad-countdown duration="10" remaining="3.3467840000000004" class="go" style="--ad-percent-previous:54.733; --ad-percent-complete:60.171;">
</flowplayer-ad-countdown>
<div class="ad-countdown ad-indicator fp-color-text">Demo video will continue after 3 seconds</div>

Info

If you combine the ad countdown with the float-on-scroll functionality, use CSS classes to hide the ad countdown while the player is minimized and in a popped-out state.

AirPlay

flowplayer-airplay-icon

AirPlay icon.

classlist - fp-airplay
parent - flowplayer-header-right-zone

Audio

flowplayer-audio-menu

Audio menu.

parent - flowplayer-control

Chromecast

flowplayer-chromecast-icon

Chromecast icon.

classlist - fp-cast-button
parent - flowplayer-header-right-zone

Endscreen

flowplayer-endscreen-interstitial

A component rendered at the end of one video and displays multiple video recommendations.

classlist - fp-endscreen
parent - flowplayer-ui

Playlist

flowplayer-skip-previous-icon

Skip previous icon.

classlist - fp-skip-prev
parent - flowplayer-control-buttons

flowplayer-skip-next-icon

Skip next icon.

classlist - fp-skip-next
parent - flowplayer-control-buttons

flowplayer-playlist-interstitial

A component rendered between the end of one playlist video and before the start of the next playlist video. Only rendered if the playlist's config properties advance and delay are true and larger than 0 respectively.

classlist - fp-interstitial
parent - flowplayer-middle

flowplayer-playlist-controls

Playlist queue controller.

Preview Thumbnails

flowplayer-thumbnails-carousel

parent - flowplayer-ui

A component that renders thumbnails after interactions with the timeline bar.

Quality Selection

flowplayer-quality-menu

Quality menu.

parent - flowplayer-control

flowplayer-share-menu

Share options menu.

parent - flowplayer-header-left-zone

flowplayer-facebook-icon

Facebook icon.

flowplayer-twitter-icon

Twitter icon.

flowplayer-embed-icon

Embed icon.

flowplayer-link-icon

Link icon.

flowplayer-share-icon

Share icon.

Speed Selection

flowplayer-speed-menu

Speed options menu.

parent - flowplayer-control

HTML Subtitles

flowplayer-subtitles-menu

Subtitles menu.

parent - flowplayer-control