HTML Audio & Video
HTML DOM Audio buffered Property
The buffered property returns a read-only TimeRanges object describing the parts of the media that the browser has already downloaded and buffered. It is commonly used to draw a buffering indicator behind the playback progress bar.
Definition and Usage
Media is often downloaded in non-contiguous chunks, especially when the user seeks around. The buffered property represents these downloaded regions as a TimeRanges object, a list of start/end time pairs measured in seconds.
Syntax
mediaElement.bufferedThe returned TimeRanges object has a length property (the number of buffered ranges) plus two methods: start(index) and end(index), each returning a time in seconds.
Example: how much is buffered
const video = document.getElementById("myVideo");
video.addEventListener("progress", () => {
const b = video.buffered;
if (b.length > 0) {
const bufferedEnd = b.end(b.length - 1);
const percent = (bufferedEnd / video.duration) * 100;
console.log("Buffered:", percent.toFixed(1) + "%");
}
});Here b.end(b.length - 1) is the end time of the last buffered range. Dividing by duration gives the fraction of the whole media that is ready to play.
There can be several disjoint ranges. Loop from 0 to buffered.length - 1 and read start(i)/end(i) if you want to draw every buffered segment rather than just the last one.