No description

JavaScript 75%
HTML 12.6%
SCSS 12.4%

Find a file

Anton Schubert 859fed6baf bump to 0.2.0		2020-04-06 01:07:47 +02:00
dist	update dist	2020-04-06 01:07:25 +02:00
public	remove playback override on test page	2015-11-09 16:27:58 -02:00
src	update build, make usable as commonjs module	2020-04-06 01:07:19 +02:00
.editorconfig	Initial import	2015-01-14 16:39:33 -02:00
.gitignore	Initial import	2015-01-14 16:39:33 -02:00
.jshintrc	Update to use the new plugin template, removing underscore dependency	2015-03-09 18:24:32 -03:00
index.js	implements proposed protocol #11	2015-12-03 15:33:46 -02:00
LICENSE	Initial import	2015-01-14 16:39:33 -02:00
package-lock.json	update build, make usable as commonjs module	2020-04-06 01:07:19 +02:00
package.json	bump to 0.2.0	2020-04-06 01:07:47 +02:00
README.md	Update jsDeliver link	2017-09-05 17:11:49 +02:00
screenshot.png	Initial import	2015-01-14 16:39:33 -02:00
webpack.config.js	update build, make usable as commonjs module	2020-04-06 01:07:19 +02:00

README.md

Clappr Level Selector Plugin

Usage

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

<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: {
    'core': [LevelSelector]
  }
});

You can also customize the labels and title:

var player = new Clappr.Player({
  source: "http://your.video/here.m3u8",
  plugins: {
    'core': [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