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

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.

Configuration

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 for example) this way:

hls: {
   xhrSetup: function (xhr) { xhr.withCredentials: true }
 }

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.

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.

If you are using a bundler like webpack make sure to expose your own HLS.js library globally as window.Hls in order to have the Flowplayer plugin picking it up.

Sample code

<!-- HLS.js v0.12.1 -->
<script src="https://cdn.jsdelivr.net/npm/hls.js@0.12.1"></script>
<!-- Flowplayer assets -->
<script src="https://cdn.flowplayer.com/releases/native/3/stable/flowplayer.min.js"></script>
<script src="https://cdn.flowplayer.com/releases/native/3/stable/plugins/hls.min.js"></script>
By using this website you agree to our privacy policy
Results