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

Chromecast

flowplayer-chromecast-icon

Chromecast icon.

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

Audio

flowplayer-audio-menu

Audio menu.

  • parent - flowplayer-control

Endscreen

flowplayer-endscreen-interstitial

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

  • classlist - fp-endscreen
  • parent - flowplayer-middle

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.

Quality selection

flowplayer-quality-menu

Quality menu.

  • parent - flowplayer-control

Share

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

Subtitles

flowplayer-subtitles-menu

Subtitles menu.

  • parent - flowplayer-control