ManagedSourceBuffer: bufferedchange event
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Note: This feature is available in Dedicated Web Workers.
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The bufferedchange event of the ManagedSourceBuffer interface is fired when the ManagedSourceBuffer's buffered range changes. This can occur following a call to appendBuffer(), remove(), endOfStream(), or as a consequence of the user agent running the memory cleanup algorithm.
This event is important for applications using a ManagedMediaSource, because the user agent can evict buffered content at any time. By listening for this event, applications can detect when buffered data has been removed and respond by fetching replacement segments to avoid playback stalls.
Syntax
Use the event name in methods like addEventListener(), or set an event handler property.
addEventListener("bufferedchange", (event) => {});
onbufferedchange = (event) => {};
Event type
A BufferedChangeEvent. Inherits from Event.
Event properties
In addition to the properties listed below, properties from the parent interface, Event, are available.
addedRangesRead only-
A
TimeRangesobject representing the time ranges that were added to the buffer. removedRangesRead only-
A
TimeRangesobject representing the time ranges that were removed from the buffer.
Examples
Tracking buffered range changes
This example sets up a ManagedMediaSource, adds a source buffer, fetches a fragmented MP4 file, and listens for the bufferedchange event to log any changes to the buffered ranges.
const videoUrl =
"https://mdn.github.io/shared-assets/videos/flower-fragmented.mp4";
const mediaType = 'video/mp4; codecs="avc1.64001F, mp4a.40.2"';
if (ManagedMediaSource.isTypeSupported(mediaType)) {
const source = new ManagedMediaSource();
const video = document.createElement("video");
video.controls = true;
video.disableRemotePlayback = true;
video.src = URL.createObjectURL(source);
document.body.appendChild(video);
source.addEventListener("sourceopen", async () => {
const sourceBuffer = source.addSourceBuffer(mediaType);
sourceBuffer.addEventListener("bufferedchange", (event) => {
for (let i = 0; i < event.addedRanges.length; i++) {
console.log(
`Added: ${event.addedRanges.start(i)}s - ${event.addedRanges.end(i)}s`,
);
}
for (let i = 0; i < event.removedRanges.length; i++) {
console.log(
`Removed: ${event.removedRanges.start(i)}s - ${event.removedRanges.end(i)}s`,
);
}
});
const response = await fetch(videoUrl);
const data = await response.arrayBuffer();
sourceBuffer.appendBuffer(data);
});
}
Specifications
| Specification |
|---|
| Media Source Extensions™ # dfn-bufferedchange |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
bufferedchange event
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.