HTML Audio & Video
HTML DOM Audio buffered Property
The buffered property returns a read-only TimeRanges object describing the parts of the media the browser has already downloaded. 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 and end time pairs measured in seconds.
The 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.
Syntax
mediaElement.buffered| Member | Description |
|---|---|
| length | The number of buffered (downloaded) time ranges |
| start(i) | The start time in seconds of buffered range i |
| end(i) | The end time in seconds of buffered range i |
Example
This runnable page listens for the progress event and reports the buffered percentage into an output box. Press Play and watch the number climb as the clip downloads.
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>buffered Demo</title></head>
<body>
<h2>How much of the video is buffered?</h2>
<video id="myVideo" width="320" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
<p><button onclick="showBuffered()">Show buffered</button></p>
<p id="output">Play the video to buffer data.</p>
<script>
const video = document.getElementById("myVideo");
const out = document.getElementById("output");
function showBuffered() {
const b = video.buffered;
if (b.length === 0) {
out.textContent = "Nothing buffered yet.";
return;
}
const bufferedEnd = b.end(b.length - 1);
const percent = (bufferedEnd / video.duration) * 100;
out.textContent = "Buffered: " + percent.toFixed(1) + "% (" +
b.length + " range(s))";
}
// Update automatically as the browser downloads more data
video.addEventListener("progress", showBuffered);
</script>
</body>
</html>More Examples
If the user seeks around, several disjoint ranges appear. Loop through them all to describe every buffered segment.
<!DOCTYPE html>
<html>
<body>
<video id="v" width="320" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
<p><button onclick="listRanges()">List all ranges</button></p>
<pre id="out"></pre>
<script>
const v = document.getElementById("v");
function listRanges() {
const b = v.buffered;
let text = "Ranges: " + b.length + "\n";
for (let i = 0; i < b.length; i++) {
text += i + ": " + b.start(i).toFixed(1) +
"s to " + b.end(i).toFixed(1) + "s\n";
}
document.getElementById("out").textContent = text;
}
</script>
</body>
</html>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.
Key Takeaways
- buffered returns a read-only TimeRanges object of downloaded regions.
- Use length, start(i) and end(i) to inspect each buffered range.
- end(length - 1) divided by duration gives the buffered percentage.
- Seeking can create multiple disjoint ranges, so loop over them for a full picture.
- Update it on the progress event to keep a load indicator current.