How can I get Buffered duration in percentage

[meisolated]

What do you want to do with Hls.js?

I'm currently making video player for my website, i was wondering how can I calculate buffered duration.

What have you tried so far?

I tried to use data from many events but nothing is making any sense for me so far. I'm new to this.

[reckoner165]

how about something like

const v = document.querySelector('video');
const getBufferedPercent = (videoElement) => {
  const bRanges = videoElement.buffered;
  let bDuration = 0;
  for (let i = 0; i < bRanges.length; i++) {
    bDuration += bRanges.end(i) - bRanges.start(i);
  }
return bDuration / videoElement.duration
}

getBufferedPercent(v);

You can test this by pasting the code snippet in the console for https://hls-js.netlify.app/demo/, and calling getBufferedPercent(v) to get a float value in real time.

[meisolated]

how about something like

const v = document.querySelector('video');
const getBufferedPercent = (videoElement) => {
  const bRanges = videoElement.buffered;
  let bDuration = 0;
  for (let i = 0; i < bRanges.length; i++) {
    bDuration += bRanges.end(i) - bRanges.start(i);
  }
return bDuration / videoElement.duration
}

getBufferedPercent(v);

You can test this by pasting the code snippet in the console for https://hls-js.netlify.app/demo/, and calling getBufferedPercent(v) to get a float value in real time.

@reckoner165 I tried but it doesn't work, Im using Nextjs and Hls.js package

[meisolated]

@reckoner165 How can I get these values to be precise

[reckoner165]

I tried but it doesn't work, Im using Nextjs and Hls.js package

I see that the duration is 0 in your logs. It might be worth calling this function only after video.readyState > 1, or checking against a local state that is updated when loadedmetadata is fired by the media element.

re: precision, I think buffered ranges only return values in seconds so I'm afraid you can't get more precise than that. What is the objective here?

[meisolated]

re: precision, I think buffered ranges only return values in seconds so I'm afraid you can't get more precise than that. What is the objective here?

wanna add loaded buffer indicator in video player timeline controller. The way youtube has