Player API

Wowza Flowplayer's API is a powerful extension for the HTML5 video object, with a small set of its own properties, methods, and event types. Most are for convenience and some extensions normalize the API so that it works consistently across browsers.

Creating A Flowplayer Instance

Creating a Wowza Flowplayer instance is synchronous. The first argument includes the selector or container you wish to store the Flowplayer instance. The second argument serves as the configuration object.

// video is a real HTML5Video tag
var video = flowplayer('#player',
  { token : "keyboardcat"
  , src   : "cdn.example.com/video.mp4"
  })

Properties

Flowplayer extends the standard Element, HTMLMediaElement, and HTMLVideoElement objects with its own set of properties. All Flowplayer specific properties are marked with an asterisk symbol (*).

Methods

The following is a list of the methods in the Wowza Flowplayer API. All Flowplayer specific properties are marked with an asterisk symbol (*). Generic methods are defined in the HTML5MEdiaElement specifications.

Events

Most every API operation starts by listening to a player event which is a specific action that happened during the existence of a player. For example, when the playback starts or ends or when a player goes to fullscreen mode.

Flowplayer offers an on method to hook your event handlers to the player. It works as follows:

// listen "seeking" and "seeked" events
video.on(['seeking', 'seeked'], function(e) {
  // e.type is the event type such as "seeking"
  var type = e.type
})

// or with a single event
video.on('seeked', function(e) { ... })

And since the API is a regular DOM object, you can use, alternatively, your favorite UI library for events. Here's how you do the job with jQuery:

// same as above, but with jQuery
$(video).on('seeking seeked', function(e) {
  // run your listener
})

Of course, you can use the standard addEventListener call to register the listener because our API is the actual video object. For example:

video.addEventListener('ended', function() {
  // playback ended
})

Note that addEventListener accepts only a single event name, while the on listener can listen to multiple, different event types.

Events reference

The following is a list of the events emitted or used by Wowza Flowplayer. This list is not exhaustive, as all Media Events are available.

Event names

All supported event names are listed in flowplayer.events objects for convenient access. For example, you can use it to view and debug all the emitted events as follows:

video.on(Object.values(flowplayer.events), function(e) {
  console.info(e.type)
})

The flowplayer.events object has the following structure:

{
  FULLSCREEN_ENTER: 'fullscreen_enter',
  FULLSCREEN_EXIT: 'fullscreen_exit',
  ENDED: 'ended',
  ERROR: 'error',
  DATA: 'data',
  METADATA: 'metadata',
  LOAD_START: 'load_start',
  MOUNT: 'mount',
  MOUNT: 'mount',
  PAUSE: 'pause',
  PLAYING: 'playing',
  PROGRESS: 'progress',
  RESIZE: 'resize',
  SEEKED: 'seeked',
  SEEKING: 'seeking',
  SOURCE: 'source',
  TIME_UPDATE: 'time_update',
  VIEW_ENTER: 'view_enter',
  VIEW_LEAVE: 'view_leave',
  VOLUME_CHANGE: 'volume_change',
  WAITING: 'waiting',
  CUEPOINTS: 'cuepoints',
  CUEPOINT_START: 'cuepoint_start',
  CUEPOINT_END: 'cuepoint_end',
  REAP: 'fp:reap'
}

Error handling

The error event allows you to deal with exceptions. For example:

video.on('error', function(err) {
  console.info(e.code)
})

The err argument contains information about the error as follows:

• src - path to the source file
• type - erroneous video type
• code - numeric error code that can have following values:
  • 2 : Not connected to the internet
  • 4 : Video file not found
  • 5 : Unsupported video file type
  • 8 : Captions file not found

Custom extensions

Flowplayer extensions are external JavaScript snippets with optional CSS that automatically run for each player instance on a page.

All extensions are ternary (3 argument) functions that are passed to flowplayer like this:

class CustomPlugin {
  init(opts, root, player) {
    console.log("configuration passed to player", opts)
    console.log("player container", root)
    console.log("player API", player)

    player.on("ended", () => console.log("playback ended"))
  }
}

// register the plugin
flowplayer(CustomPlugin)

The provided function is called for every flowplayer instance on the page right before the player is inserted or mounted on the page. The options are:

• opts is the configuration object.
• root is the root element of the player UI.
• video is the HTMLVideoElement of the media.

All extensions typically listen to the events and act on them. Flowplayer itself is built as a list of extensions.

Global object

The global flowplayer object has a set of properties and tools that are mainly targeted for plugin developers. For example:

// loop trough all player instances on the page
flowplayer.instances.forEach(function(api) {
  console.info(api)
})