level-selector

0.2.0 • Public • Published

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: [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

Readme

Keywords

Package Sidebar

Install

npm i level-selector

Weekly Downloads

93

Version

0.2.0

License

MIT

Unpacked Size

592 kB

Total Files

19

Last publish

Collaborators

  • towerz