image stuck in hls about hls.js

[robwalch]

If you want to wait for the combined buffer to reach a certain length before allowing playback to advance, set playbackRate to 0 when seeking. Set it back to 1 once it has reached the desired minimum.

Can you show me how to do it?

The console logs and "seeked" event listener are for demonstration and debugging purposes only. Adjust the minimum buffer length to a value that works with the environment you are experiencing stalls on:

var MIN_BUFFER_LENGTH = 4;

video.onseeking = () => {
  console.log('Seeking to: ' + video.currentTime);
  const bufferLength = hls.mainForwardBufferInfo?.len;
  if (bufferLength < MIN_BUFFER_LENGTH && video.playbackRate === 1) {
    console.log('Halting playback due to low buffer: ' + bufferLength);
    video.playbackRate = 0;
  }
};

video.onseeked = () => {
  console.log('Seeked to: ' + video.currentTime);
};

hls.on(Hls.Events.FRAG_BUFFERED, () => {
  const bufferLength = hls.mainForwardBufferInfo?.len;
  if (bufferLength >= Math.min(MIN_BUFFER_LENGTH, video.duration - video.currentTime - 1) && video.playbackRate === 0) {
    console.log('Resuming playback with buffer: ' + bufferLength);
    video.playbackRate = 1;
  }
});

[robwalch]

HLS.js leaves playback to the browser. If you want to wait for the combined buffer to reach a certain length before allowing playback to advance, set playbackRate to 0 when seeking. Set it back to 1 once it has reached the desired minimum.

[marceloaraujo28]

Can you show me how to do it? @robwalch