About the Wowza Flowplayer plugins

Wowza Flowplayer can be extended through the use of various plugins. As module extensions, plugins allow users to customize their viewing experience and developers to extend the player's capabilities without altering its core design.

Plugin descriptions

The following table provides an overview of available plugins and links to important documentation for usage.

Install a plugin

To load a plugin when embedding the player using our CDN, include the plugin's URL after the core player. For an example, see the Embed the player in your site section.

If you plan on using the npm approach to embed the player and plugins, see the Use npm section. For additional help with this topic, you can also review the Add the standalone player to a TypeScript project guide. This guide focuses on using npm to work with the player and plugins.

Plugin configuration

To configure a plugin after you've loaded it, you need to set a configuration object at the top level and include desired settings. For example, this is the minimum working configuration to initialize the player with the Consent plugin and an MPEG-DASH stream:

<script src="//cdn.flowplayer.com/releases/native/3/stable/flowplayer.min.js"></script>
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/consent.min.js"></script>
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/dash.min.js"></script>

const player = flowplayer("#player", { 
  src: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4",
  // Use plugin constant to allow all tracking, no storage
  consent: flowplayer.consent.tracking.ALL | flowplayer.consent.storage.NONE
});

import flowplayer from "@flowplayer/player";
import "@flowplayer/player/flowplayer.css";
import Consent from "@flowplayer/player/plugins/consent";
import Dash from "@flowplayer/player/plugins/dash";

const flowplayerWithPlugins = flowplayer(Dash, Consent);

const player = flowplayerWithPlugins("#player", {
  src: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4",
  // Use plugin constant to allow all tracking, no storage
  consent: Consent.tracking.ALL | Consent.storage.NONE
});

Plugin constants

In the previous code snippet, you can see that some plugins allow for the usage of plugin constants during configuration. The way you leverage these constants depends on how you embed the player in your site. If we continue working with the Consent plugin, we can:

• Allow all tracking in a CDN player implementation with the flowplayer.consent.tracking.ALL plugin constant.
• Allow all tracking in an npm player implementation with the Consent.tracking.ALL plugin constant instead.

Plugin events

The way you handle plugin events depends on the context that you're using to embed the player in your site.

• The CDN approach relies on the Universal Module Definition (UMD) format that uses global variables and the window object to make the Wowza Flowplayer library accessible across browsers and multiple environments.
• When you embed the player using Node Package Manager (npm), you're leveraging the ECMAScript Modules (ESM) approach instead, where variables exist within the context of imported modules.

Handle CDN events

If you're a CDN user working with plugin events, you can utilize the plugin constants from the UMD. In this context, constants, classes, and methods are attached to the flowplayer object, and you can use an event like flowplayer.hls.events.ATTACHED to work with the plugin and your player instance:

player.on(flowplayer.hls.events.ATTACHED, (ev) => {
  console.log(ev.detail.hls.userConfig);
});

Handle npm events

If you're an npm user, you must first import the plugin, then include the constant from the plugin class itself. For example, with the same HLS ATTACHED event, you can add the HLS.events.ATTACHED event as in the following example:

import HLS from "@flowplayer/player/plugins/hls";

player.on(HLS.events.ATTACHED, (ev) => {
  console.log(ev.detail.hls.userConfig);
});