Implements an HLS loader plugin, which is capable of playing .m3u8 source files. The use of this plugin has the same caveats as the use of hls.js which primarily means that the MediaSource API must be available in the browser (except for iOS, ipadOS and MacOS which offer native HSl support).

In the docs, HLS refers to the protocol name, while hls is used for the library and API namespace.

Manual Javascipt setups

Include the plugin next to the core player:

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

Player and plugins exist in different release versions. Please see the release channel documentation.

OVP managed players

The HSL plugin is included in the OCP async and iframe players.


The plugin is configured in top level configuration under hls namespace.

Flowplayer Native configuration properties:

    • property
    • description
    • default
    • native boolean
    • force use of native browser HLS implementations if available. Either false or true.
    • false

Forcing native HLS will disable manual quality selection and custom hls.js API settings.

Sample code:

var player = flowplayer('#container',
  { src: '//edge.flowplayer.org/bauhaus.m3u8',
    hls : { native: true },
    token: 'your player token'

You can also add custom functions like xhr headers (used for signed cookies or custom headers) this way:

hls: {
   // send (signed) cookies
   xhrSetup: function (xhr) { xhr.withCredentials = true } 


hls: {
  // send custom request headers
  xhrSetup: xhr => {
    xhr.setRequestHeader('id', 1)
    xhr.setRequestHeader('token', 456)

The above code only works for devices which support Media Source Extensions and hls.js, hence it won't on iPhones.

hls.js parameters

All other configuration properties under the hls namespace are propagated to the hls constructor. This means you can pass the hls.js fine-tuning parameters here (this will only work where hls.js is used and not in native HLS implementations of course).

For example:

var player = flowplayer('#container',
  { src: '//edge.flowplayer.org/bauhaus.m3u8',
    hls : { startLevel: 1 },
    token: 'your player token'

will set the initial level to the second level rather than the first (which would be 0).

var player = flowplayer('#container',
  { src: '//edge.flowplayer.org/bauhaus.m3u8',
    hls : { startLevel: -1,
            testBandwidth: true},
    token: 'your player token'

will do a bandwidth check with the first segment of the lowest bandwidth level before starting playback (by default the player will start with the first level and do a bandwidth check while playing the first segment of that level).

If you would like to learn more about the underlying configuration properties from hls.js you can read up on them at the official hls.js documentation

The level index is relative to the order of the qualities starting with 0, ie 0 is always the lowest available quality.

Accessing the hls instance

The hls instance is exposed at player.hls when it is available, providing the ability to fully manipulate the underlying implementation for any custom integration necessary.


There is one event specific to the plugin, hls/failover . This event fires when the integrated redundant stream failover switches to a backup stream (or back to the primary).

Currently the event needs to be hardcoded for monitoring, it is not yet available in the flowplayer.events object. The failove event has two properties:

 ev.detail.reason = A string, the reason for the failover.
 ev.detail.stale = An object, which is the level hls is swapping from.

This event is not available in native HLS implementations (ie iOS).

Using a specific version of HLS.js

The HLS.js library is bundled inside this plugin. The version bundled is tested against all the features the plugin implements. If the bundled version for some reason is not sufficient for you and you want to include a specific version you can do that by manually including the HLS.js library before loading this plugin.

This option is deprecated since v3.x.