Hls.js: Minimum Level For Looping

Created on 30 Jun 2016  路  4Comments  路  Source: video-dev/hls.js

For looping videos, is there any way to force hls.js to download higher levels for fragments it already has low levels for? This is useful for looping over a short video that must start right away, but should eventually reach it's full quality.

Question Wontfix

Most helpful comment

I found a relatively simple way to tackle this problem without reloading good quality fragments, improving on @mangui's solution:

this.hlsInstance.on(Hls.Events.MEDIA_ATTACHED, () => {
  const hlsFragments = [];
  this.hlsInstance.loadSource(srcHls);
  this.hlsInstance.on(Hls.Events.FRAG_LOADED, function (event, data) {
    hlsFragments.push(data.frag);
  });
  this.hlsInstance.on(Hls.Events.LEVEL_SWITCHED, (event, data) => {
    const fragmentLevels = hlsFragments.map(fragment => fragment.level);
    const maxLevel = fragmentLevels.reduce((max, cur) => Math.max(max, cur), 0);
    hlsFragments.map((fragment, index) => {
      if (fragment.level < maxLevel) {
        this.hlsInstance.trigger(Hls.Events.BUFFER_FLUSHING, {startOffset: fragment.startPTS, endOffset: fragment.endPTS});
        hlsFragments.splice(index, 1);
      }
    });
  });
});

Basically what it does is to save the metadata of each loaded fragment to an Array, then if there's a level switch find out which fragment has a quality level below the maximum quality and reload those using the start and end time from the fragment.

The great thing about it is that it will keep on improving the quality level as long as there are switches.

All 4 comments

Hi @neuman do you mean reloading the beginning of the video with higher quality on looping ?

there is nothing like this available ATM

but you can eventually try to flush the beginning of the buffer once all the video has been successfully loaded:


hls.on(Hls.Events.BUFFER_EOS,function() {
 hls.trigger(Event.BUFFER_FLUSHING, {startOffset: 0, endOffset: something smaller than video.currentTime });
});

this should force hls.js to reload first fragment at adequate quality level.

I found a relatively simple way to tackle this problem without reloading good quality fragments, improving on @mangui's solution:

this.hlsInstance.on(Hls.Events.MEDIA_ATTACHED, () => {
  const hlsFragments = [];
  this.hlsInstance.loadSource(srcHls);
  this.hlsInstance.on(Hls.Events.FRAG_LOADED, function (event, data) {
    hlsFragments.push(data.frag);
  });
  this.hlsInstance.on(Hls.Events.LEVEL_SWITCHED, (event, data) => {
    const fragmentLevels = hlsFragments.map(fragment => fragment.level);
    const maxLevel = fragmentLevels.reduce((max, cur) => Math.max(max, cur), 0);
    hlsFragments.map((fragment, index) => {
      if (fragment.level < maxLevel) {
        this.hlsInstance.trigger(Hls.Events.BUFFER_FLUSHING, {startOffset: fragment.startPTS, endOffset: fragment.endPTS});
        hlsFragments.splice(index, 1);
      }
    });
  });
});

Basically what it does is to save the metadata of each loaded fragment to an Array, then if there's a level switch find out which fragment has a quality level below the maximum quality and reload those using the start and end time from the fragment.

The great thing about it is that it will keep on improving the quality level as long as there are switches.

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

bump. I tried @daaain 's solution, but I get segments where the playback is stuck due to low buffer. Is there an easier way of doing this with the level controller or the network controller?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

harbinha picture harbinha  路  3Comments

silltho picture silltho  路  4Comments

eteubert picture eteubert  路  3Comments

shalommeoded picture shalommeoded  路  3Comments

nickcartery picture nickcartery  路  4Comments