Console screenshot

Via the second argument - called root above - you can access the root or container element of the player.

Extension and plugin properties

The following properties are provided by player extensions and plugins. Follow the link in the third column for further details:

Extension methods

The following methods are provided by player extensions. Follow the link in the second column for further details:

Load video

load() also accepts a clip object as argument in the same way a pure JavaScript installation does as value to the clip option. The video represented by this clip object is then loaded into an existing player instance:

api.load({
  sources: [
    { type: "application/x-mepgurl",
      src:  "//mydomain.com/video2.m3u8" },
    { type: "video/webm",
      src:  "//mydomain.com/video2.webm" },
    { type: "video/mp4",
      src:  "//mydomain.com/video2.mp4"  }
  ]
});

The following shorthands are available for the clip object argument:

• Array of sources

  api.load([
    { mpegurl: "//mydomain.com/video2.m3u8" },
    {    webm: "//mydomain.com/video2.webm" },
    {     mp4: "//mydomain.com/video2.mp4"  }
  ]);
  

This shorthand does not accept further clip or source options.

• URL as string

  api.load("//mydomain.com/my/another/video2.mp4");
  

This shorthand does not accept further clip or source options. And it expects the same source types to be present as configured for the player instance referenced by the API. Additionally the sources must be available via HTTP and obey the same file naming scheme: they can only differ by their filename suffix.

The above shorthand could be applied successfully to the following player for example:

<div class="flowplayer">
   <video>
      <source type="application/x-mpegurl" src="//mydomain.com/video1.m3u8">
      <source type="video/webm" src="//mydomain.com/video1.webm">
      <source type="video/mp4" src="//mydomain.com/video1.mp4">
   </video>
</div>

• tip If in doubt go for the full clip object syntax instead of using a shorthand. This will make your code more self explanatory, transparent and easier to maintain in the long term.

• Callback

  api.load({
    sources: [
      { type: "application/x-mepgurl",
        src:  "//mydomain.com/video2.m3u8" },
      { type: "video/webm",
        src:  "//mydomain.com/video2.webm" },
      { type: "video/mp4",
        src:  "//mydomain.com/video2.mp4"  }
    ]
  }, function (e, api, video) {;
    console.log(video.duration);
  });
  

The callback function will be invoked when the player is ready and the new video is about to start.

Error codes

Error codes and error messages returned by the third argument of the error event are mapped the following way:

Errors 1 through 4 are HTML5 video exceptions, errors 5 through 10 are Flowplayer exceptions.

Extension events

The cuepoint event is provided by 2 player extensions. Follow the link in the second column for further details:

API event binding

Normally events are simply attached to the API, like in the example above.

Events attached to the API return the API object.

jQuery event binding

You can also bind your events directly to the jQuery object referencing the container element. For example:

$(".flowplayer:first").on("pause", function(e, api) {
  // do something on pause
});

This makes for seamless integration of the Flowplayer API into custom jQuery plugins.

Events attached via jQuery return the jQuery object of the container element.

As this is a jQuery event, the this keyword refers to the root or container element of the player within the callback. It corresponds to the currentTarget property of the first argument.

Name space

All Flowplayer events can be confined to a specific name space when you attach them:

api.on("pause.mypause", function (e, api) {
  // do something on pause
});

Flowplayer event name spaces work as in jQuery, but do not require jQuery to be loaded. They come in handy for instance if you want to turn off a specific callback:

// turns off pause.mypause, but not the entire pause callback
api.off("pause.mypause");

Attaching to JavaScript installation

Events can immediately be attached to the API of a specific JavaScript installation:

flowplayer("#player", {
  // player configuration goes here
}).on("pause", function (e, api) {
  // do something on pause with this player
});

Attaching to manual installation

Events can immediately be attached to the container jQuery object of a specific manual installation:

$(".player").flowplayer({
  // player configuration goes here
}).on("pause", function (e, api) {
  // do something on pause with these players
});

Caveat: This will catch the load event of splash setups only because otherwise the container element containing the VIDEO tag is already loaded. - One of the reasons why we recommend the pure JavaScript installation method for scripting-heavy setups.

Event chaining

All Flowplayer events return the API, or, if attached via jQuery the jQuery object of the container element. Therefore event bindings can be chained:

api.on("pause", function (e, api) {
  // do something on pause
}).on("resume", function (e, api) {
  // do something on resume
});

Event prevention

In some situations it is desireable to prevent player events from happening or to limit their scope, and optionally take a different action. To achieve this the Flowplayer API offers two methods which can be chained to the event variable provided by first argument of the event handle:

This demo gives an example of both methods in action to show how seeking can be disabled.