# Clappr Level Selector Plugin
## Usage
Add both Clappr and Level Selector plugin scripts to your HTML:
```html
```
Then just add `ClapprLevelSelectorPlugin` into the list of plugins of your player instance:
```javascript
var player = new Clappr.Player({
source: "http://your.video/here.m3u8",
plugins: [ClapprLevelSelectorPlugin]
});
```
You can also customize the labels and title:
```javascript
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:
```javascript
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:*
```html
```
## 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