<head>
  <script type="text/javascript" src="http://cdn.clappr.io/latest/clappr.min.js"></script>
  <script type="text/javascript" src="dist/level-selector.js"></script>
</head>

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

var player = new Clappr.Player({
  source: "http://your.video/here.m3u8",
  plugins: [ClapprLevelSelectorPlugin]
});

You can also customize the labels and title:

var player = new Clappr.Player({
  source: "http://your.video/here.m3u8",
  plugins: [ClapprLevelSelectorPlugin],
  ClapprLevelSelectorPluginConfig: {
    title: 'Quality',
    labels: {
        2: 'High', // 500kbps
        1: 'Med', // 240kbps
        0: 'Low', // 120kbps
    },
    labelCallback: function(playbackLevel, customLabel) {
        return customLabel + playbackLevel.level.height+'p'; // High 720p
    }
  },
});

And also transform available levels:

var player = new Clappr.Player({
  // [...]
  ClapprLevelSelectorPluginConfig: {
    onLevelsAvailable: function(levels) {
      return levels.reverse(); // For example, reverse levels order
    },
  },
});

Note: There is a minified version served through CDNs too:

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

Compatibility

All the playbacks that follow these rules:

must trigger PLAYBACK_LEVELS_AVAILABLE with an ordered array of levels [{id: 3, label: '500Kbps'}, {id: 4, label: '600Kpbs'}]
to have a property levels, initialized with [] and then after filled with the proper levels
to have a property currentLevel (set/get), the level switch will happen when id (currentLevel) is changed (playback.currentLevel = id)
optionally, trigger events: PLAYBACK_LEVEL_SWITCH_START and PLAYBACK_LEVEL_SWITCH_END
id=-1 will be always the Auto level

Keywords

clappr

plugin

FAQs

What is clappr-level-selector-plugin?

Is clappr-level-selector-plugin popular?

Is clappr-level-selector-plugin well maintained?

Package last updated on 03 Dec 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install