Limit Maximum Resolution in HLS.js

In some cases, you may need to limit the maximum video resolution in the video player (HLS.js). Fortunately, you can limit the maximum resolution in HLS.js by setting the maxMaxBufferLength and using the levelCap feature. There are a few ways to do this:

1. Using hls.currentLevel or hls.nextLevel

You can manually control the playback level by setting hls.currentLevel or hls.nextLevel to restrict resolution.

hls.on(Hls.Events.MANIFEST_PARSED, function() {
  // Limit to 720p (Example: Find the index for 720p)
  let maxResolutionIndex = hls.levels.findIndex(level => level.height <= 720);
  if (maxResolutionIndex !== -1) {
    hls.currentLevel = maxResolutionIndex;
  }
});

2. Using hls.levelCap

You can limit the highest level by setting hls.autoLevelCapping dynamically:

hls.on(Hls.Events.MANIFEST_PARSED, function() {
  hls.autoLevelCapping = hls.levels.findIndex(level => level.height <= 720);
});

3. Handling on Level Loading

You can filter levels dynamically as well:

hls.on(Hls.Events.LEVEL_LOADED, function(event, data) {
  if (hls.levels[data.level].height > 720) {
    hls.nextLevel = hls.levels.findIndex(level => level.height <= 720);
  }
});

4. Using maxBufferLength and maxMaxBufferLength

Though not directly limiting resolution, reducing the buffer size may encourage lower-quality selections.

hls.config.maxBufferLength = 10; // 10 seconds
hls.config.maxMaxBufferLength = 30; // Maximum 30 seconds

Notes:

• Setting hls.autoLevelCapping will prevent the player from switching to higher resolutions.
• Make sure that the correct resolution exists in the available levels (hls.levels).

Would you like to integrate this into a broader logic for adaptive streaming handling?