Quality Selection plugin

The Quality Selection plugin adds a selection menu to the player user interface (UI), where viewers can select different quality levels for multi-rendition streams. This plugin can be used with HLS, MPEG-DASH, and Real-Time Streaming (RTS) streams.

To see the Quality Selection plugin in action, you can view this demo.

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 MPEG-DASH plugin .
• Ensure that your HLS, MPEG-DASH, or RTS media source contains multiple quality levels.
• Read about embedding the core player in your site by adding the minimum CSS and JavaScript player components.
• Make sure you have a player token. For more, see Token configuration . Tokens aren't needed for local development.
• The instructions on this page generally assume you're using the Wowza Flowplayer CDN to embed the player in your site. If you're using npm, see our npm instructions or our TypeScript guide .

Install the plugin

To install the Quality Selection plugin, load it next to the core player, the HLS plugin, the MPEG-DASH plugin, or the RTS stream.

<!-- Load standard player skin -->
<link rel="stylesheet" href="https://cdn.flowplayer.com/releases/native/3/stable/style/flowplayer.css">
<!-- Load player script -->
<script src="//cdn.flowplayer.com/releases/native/3/stable/flowplayer.min.js"></script>

<!-- Load plugins -->
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/qsel.min.js"></script>
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/hls.min.js"></script>
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/dash.min.js"></script>
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/rts.min.js"></script>

// Import player library and basic CSS for player
import flowplayer from "@flowplayer/player";
import "@flowplayer/player/flowplayer.css";

// Import plugins
import Qsel from "@flowplayer/player/plugins/qsel";
import HLS from "@flowplayer/player/plugins/hls";
import Dash from "@flowplayer/player/plugins/dash";
import RTS from "@flowplayer/player/plugins/rts";

Add HTML elements

Add the HTML components to render the player elements on your page:

<div id="player"></div>

Configure the plugin

The plugin can be set up at the top-level configuration under the qsel namespace. You can use the following properties during configuration.

The plugin uses the resolution's height component for labels by default when you don't specify any labels for your renditions. To use the standard label for a certain quality 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.

Example

For example, 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
bauhaus/1/800p/pl.m3u8
#EXT-X-STREAM-INF:AVERAGE-BANDWIDTH=1004921,BANDWIDTH=1437072,CODECS="mp4a.40.2,avc1.64001f",RESOLUTION=1272x530,FRAME-RATE=25.000
bauhaus/1/530p/pl.m3u8
#EXT-X-STREAM-INF:AVERAGE-BANDWIDTH=788567,BANDWIDTH=1205456,CODECS="mp4a.40.2,avc1.64001f",RESOLUTION=1008x420,FRAME-RATE=25.000
bauhaus/1/420p/pl.m3u8
#EXT-X-STREAM-INF:AVERAGE-BANDWIDTH=730176,BANDWIDTH=1100176,CODECS="mp4a.40.2,avc1.64001e",RESOLUTION=960x400,FRAME-RATE=25.000
bauhaus/1/400p/pl.m3u8
#EXT-X-STREAM-INF:AVERAGE-BANDWIDTH=482003,BANDWIDTH=663264,CODECS="mp4a.40.2,avc1.640015",RESOLUTION=624x260,FRAME-RATE=25.000
bauhaus/1/260p/pl.m3u8
#EXT-X-STREAM-INF:AVERAGE-BANDWIDTH=389490,BANDWIDTH=530160,CODECS="mp4a.40.2,avc1.64000d",RESOLUTION=480x200,FRAME-RATE=25.000
bauhaus/1/200p/pl.m3u8
#EXT-X-STREAM-INF:AVERAGE-BANDWIDTH=286975,BANDWIDTH=342912,CODECS="mp4a.40.2,avc1.64000c",RESOLUTION=384x160,FRAME-RATE=25.000
bauhaus/1/160p/pl.m3u8
#EXT-X-STREAM-INF:AVERAGE-BANDWIDTH=210126,BANDWIDTH=236880,CODECS="mp4a.40.2,avc1.64000c",RESOLUTION=384x160,FRAME-RATE=25.000
bauhaus/1/160p-lo/pl.m3u8

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

800p | second | third | fifth | 200p

Your configuration would like this:

cont player = flowplayer("#player", { 
  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, 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
    ]
  }
});

Listen to plugin events

This section describes the events you can capture to control and manage quality levels within your player instance. To understand event handling differences between CDN or npm implementations, see Plugin events.

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

Example

The following example sets up an event listener to capture all available video renditions. When a new quality is selected from the menu, a message is written to the console.

player.on(flowplayer.qsel.events.QUALITIES, (event) => {
  console.log(event.detail[0].height);
});

player.on(flowplayer.qsel.events.SET_QUALITY, (event) => {
  console.log("Quality changed.");
});

player.on(Qsel.events.QUALITIES, (event) => {
  console.log(event.detail[0].height);
});

player.on(Qsel.events.SET_QUALITY, (event) => {
  console.log("Quality changed.");
});