Quality Selection plugin

This plugin implements a selection menu for the different quality levels of a multi-rendition stream. This plugin can be used with HLS, MPEG-DASH, and Real-Time Streaming (RTS).

Before you start

Before you start working with this plugin, make sure you've met these requirements:

Make sure to also load the HLS plugin or the DASH plugin .
Ensure that your HLS, MPEG-DASH, or RTS media source contains multiple quality levels.

Install the plugin

Load the quality selection plugin next to the core player, the HLS plugin, the DASH plugin, or the RTS stream.

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>
<!-- or
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/dash.min.js"></script>
-->
<!-- or
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/rts.min.js"></script>
-->
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/qsel.min.js"></script>

Configure the plugin

The plugin is configured in top level configuration under the qsel namespace.

Properties

Property	Default	Description
`labels`	[ ]	Specifies index-based label set.

The default is to show the resolution (height component) as a label. If you want to use the standard label for a certain level, omit the string for that index position. You can also restrict the selection menu to fewer variants than in the manifest by setting certain levels to false. The index is derived from the master manifest.

Sample configuration

For example, if your master.m3u8 contains the following levels:

Copy

Copied

#EXTM3U
#EXT-X-STREAM-INF:AVERAGE-BANDWIDTH=1525047,BANDWIDTH=2207872,CODECS="mp4a.40.2,avc1.640028",RESOLUTION=1920x800,FRAME-RATE=25.000
800p/pl.m3u8
#EXT-X-STREAM-INF:AVERAGE-BANDWIDTH=1004921,BANDWIDTH=1437072,CODECS="mp4a.40.2,avc1.64001f",RESOLUTION=1272x530,FRAME-RATE=25.000
530p/pl.m3u8
#EXT-X-STREAM-INF:AVERAGE-BANDWIDTH=788567,BANDWIDTH=1205456,CODECS="mp4a.40.2,avc1.64001f",RESOLUTION=1008x420,FRAME-RATE=25.000
420p/pl.m3u8
#EXT-X-STREAM-INF:AVERAGE-BANDWIDTH=730176,BANDWIDTH=1100176,CODECS="mp4a.40.2,avc1.64001e",RESOLUTION=960x400,FRAME-RATE=25.000
400p/pl.m3u8
#EXT-X-STREAM-INF:AVERAGE-BANDWIDTH=482003,BANDWIDTH=663264,CODECS="mp4a.40.2,avc1.640015",RESOLUTION=624x260,FRAME-RATE=25.000
260p/pl.m3u8
#EXT-X-STREAM-INF:AVERAGE-BANDWIDTH=389490,BANDWIDTH=530160,CODECS="mp4a.40.2,avc1.64000d",RESOLUTION=480x200,FRAME-RATE=25.000
200p/pl.m3u8
#EXT-X-STREAM-INF:AVERAGE-BANDWIDTH=286975,BANDWIDTH=342912,CODECS="mp4a.40.2,avc1.64000c",RESOLUTION=384x160,FRAME-RATE=25.000
160p/pl.m3u8
#EXT-X-STREAM-INF:AVERAGE-BANDWIDTH=210126,BANDWIDTH=236880,CODECS="mp4a.40.2,avc1.64000c",RESOLUTION=384x160,FRAME-RATE=25.000
160p-lo/pl.m3u8

And you want a menu with these labels and available variants:

800p | second | third | fifth | 200p

Your configuration would like this:

Copy

Copied

var player = flowplayer('#container',
  { src  : '//edge.flowplayer.org/bauhaus.m3u8'
  , qsel : {
      labels:
        [
          // index 1, default label 800p will be used, comma indicates second level is next
          ,
          // index 2
          "second",
          // index 3
          "third",
          // index 4, hide fourth level by setting it to false , option will be hidden
          false,
          // index 5
          "fifth",
          // index 6 uses default label 200p
          ,
          // index 7, do not show
          false,
          // index 8, do not show
          false
        ]
      }
  })

Events

All events are exposed at the flowplayer.events dictionary. This table describes the events you can capture to manage the quality selection menu for the player.

Event	Description
flowplayer.events.QUALITIES	Emitted when the set of underlying qualities has changed.
flowplayer.events.SET_QUALITY	Emitted when the quality should be set to something different.

You can emit the events manually to preselect a quality. For more, please check the qsel plugin demo.

info

For hls.js, the level index is relative to the order of the qualities starting with 0, where 0 is always the lowest available quality.
Native HLS implementations, like in iOS, do not offer an API to select a quality, so the plugin won't work there.

Demo this plugin

Check out this Codepen demo to see another example of how to use the Quality Selection plugin.