<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 LevelSelector into the list of plugins of your player instance:

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

You can also customize the labels and title:

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

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 level-selector?

Is level-selector popular?

Is level-selector well maintained?

Package last updated on 02 Dec 2018

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