HLS

This plugin implements an HLS loader plugin that 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).

Info

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

Installation

Include the plugin next to the core player:

Copy
Copied
<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>

Configuration

The plugin is configured in the top-level configuration under the hls namespace. The Wowza Flowplayer configuration properties are listed in the following table.

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

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

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

When using either of the following code samples, you can add custom functions like XHR headers for signed cookies or custom headers. These code examples only work for devices that support Media Source Extensions and hls.js. Therefore, they won't work on iPhones.

Copy
Copied
hls: {
   // send (signed) cookies
   xhrSetup: function (xhr) { xhr.withCredentials = true }
 }
Copy
Copied
hls: {
  // send custom request headers
  xhrSetup: xhr => {
    xhr.setRequestHeader('id', 1)
    xhr.setRequestHeader('token', 456)
  }
}

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 available in the flowplayer.events object. The failover event has two properties:

Copy
Copied
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.
})
Info

This event is not available in native HLS implementations (for example, iOS).