HLS

Introduction

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

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>

OVP managed players

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

Configuration

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

Flowplayer Native configuration properties:

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

or

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

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

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.

Events

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:

player.on("hls/failover",(ev)=>{
 ev.detail.reason = A string, the reason for the failover.
 ev.detail.stale = An object, which is the level hls is swapping from.
})

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.