Quality Selection

Implements a selection menu for the different quality levels of a multi-rendition stream (HLS and DASH).

Prerequisites for manual setup

Manual Javascript setups

Load the quality selection plugin next to the core player and the HLS plugin or the DASH plugin.

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

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

OVP managed players

You can add the feature in the Plugins section of the OVP player configurator

Configuration

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

    • property
    • default
    • description
    • labels
    • []
    • index based label set

The default is to show the resolution (height component) as 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, ie if your master.m3u8 contains the following levels:

#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 qsel: {}` code would look like

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

API

Events

All events are exposed at the flowplayer.events dictionary.

These following events are used by the QSEL plugin:

    • property
    • description
    • QUALITIES
    • When the set of underlying qualities has changed
    • SET_QUALITY
    • When the quality should be set to something different

You can emit the events manually to preselect a quality. Please check the qsel plugin demo

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

Caveat

Native HLS implementations like in iOS do not offer an API to select a quality, so the plugin won't work there.

Demo

Codepen

By using this website you agree to our privacy policy
Results