clappr-quality-selector-plugin's Introduction

Clappr Quality Selector Plugin

It's modified version of clappr-level-selector-plugin with the following extra features:

Persistent quality level between session.
Smooth switching quality between level
defaultQuality options to set quality ID (number) when player start or use -1 for AUTO
setPlaybackQuality() function to select quality by ID this method have to be called after PLAYBACK_LEVELS_AVAILABLE or media played.
getPlaybackQuality() function to get available quality levels, must be called like above.
Reordering the Quality levels placement, from the bottom to the top are AUTO to the highest quality level.
HD icon displayed by default if in playlist it has HD Quality.
Small size, 3KB gzipped.

Plugin Compatibility

Require Clappr v0.3.0 or above

Usage

Add both Clappr and Quality Selector plugin scripts to your HTML:

  <script type="text/javascript" src="//cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.min.js"></script>
  <script type="text/javascript" src="//cdn.jsdelivr.net/gh/ewwink/clappr-quality-selector-plugin@latest/quality-selector.js"></script>

Then just add QualitySelector into the list of plugins of your player instance:

var player = new Clappr.Player({
  source: "http://your.video/here.m3u8",
  plugins: [QualitySelector],
  // qualitySelectorConfig: {defaultQuality: 0} // start with quality ID 0 or lowest
});

You can also customize the labels, title, and quality:

var player = new Clappr.Player({
  source: "http://your.video/here.m3u8",
  plugins: [QualitySelector],
  qualitySelectorConfig: {
    title: 'Quality',
    labels: {
      2: 'High', // 500kbps
      1: 'Med', // 240kbps
      0: 'Low', // 120kbps
    },
    defaultQuality: 0, // start with quality 0 or Lowest
    labelCallback: function(playbackLevel, customLabel) {
      return customLabel + playbackLevel.level.height + 'p'; // High 720p
    }
  },
  events: {
    onPlay: function() {
      setTimeout(function() {
        var levels = player.getPlaybackQuality();
        console.log(levels); // log the levels
        player.setPlaybackQuality(2); // Change to highest level
      }, 10000); // fired after 10 second playing
    }
  }
});

clappr-quality-selector-plugin's People