Quality example

Explanation

While HLS’s main concept is automatic quality level switching, we still allow for a user to manually choose a video quality. Qumu Cloud uses HLS.js under the hood so our methods are proxying HLS.js behaviour.

Method	Description
`getLevel(): number`	Returns -1 for automatic level switching or returns the level requested by the user in the player.
`getLevels(): Array<{key: string; value: number}>`	Returns the available levels.
`getPlaybackLevel(): number`	Returns the actual level used by HLS.js for playback. The value will be equal to getLevel() for fixed levels and different if the requested level is -1 (auto)
`setLevel(level: number): void`	Update the requested level. Send `-1` if you want to use automatic level switching from HLS.js or use a level from the `.getLevels()` method

Event	Description
`levelchange`	Triggered every time the level is changed by the user
`playbacklevelchange`	Triggered every time the level is updated by HLS.js

Example

Listen for levelchange events

Listen for playbacklevelchange events

Code

import { PlayerSdk } from '@enghouse-qumu/player-sdk';

const iframe = document.querySelector('iframe');
const sdk = new PlayerSdk(iframe);

document.getElementById('getLevels').addEventListener('click', () => {
  sdk.getLevels().then((levels) => {
    console.log('levels', levels);
  });
});

document.getElementById('getLevel').addEventListener('click', () => {
  sdk.getLevel().then((level) => {
    console.log('level', level);
  });
});

document.getElementById('getPlaybackLevel').addEventListener('click', () => {
  sdk.getPlaybackLevel().then((playbackLevel) => {
    console.log('playbackLevel', playbackLevel);
  });
});

document.getElementById('setLevelAuto').addEventListener('click', () => {
  sdk.setLevel(-1);
});

document.getElementById('setLevel1080p').addEventListener('click', () => {
  sdk.setLevel(4);
});

document.getElementById('setLevel720p').addEventListener('click', () => {
  sdk.setLevel(3);
});

document.getElementById('setLevel480p').addEventListener('click', () => {
  sdk.setLevel(2);
});

document.getElementById('setLevel240p').addEventListener('click', () => {
  sdk.setLevel(1);
});

sdk.addEventListener('levelchange', (newLevel) => {
  console.log('levelchange', newLevel);
});

sdk.addEventListener('playbacklevelchange', (newPlaybackLevel) => {
  console.log('playbacklevelchange', newPlaybackLevel);
});