BufferedChangeEvent
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.
The BufferedChangeEvent interface of the Media Source Extensions API represents the event object for the bufferedchange event fired on a ManagedSourceBuffer. This event is fired whenever the buffered ranges of the ManagedSourceBuffer change, for example as a result of appendBuffer(), remove(), or endOfStream() calls, or when the user agent runs the memory cleanup algorithm.
Constructor
BufferedChangeEvent()-
Creates and returns a new
BufferedChangeEventobject.
Instance properties
Also inherits properties from its parent interface, Event.
BufferedChangeEvent.addedRangesRead only-
A
TimeRangesobject representing the time ranges that were added to theManagedSourceBuffer's buffer. BufferedChangeEvent.removedRangesRead only-
A
TimeRangesobject representing the time ranges that were removed from theManagedSourceBuffer's buffer.
Examples
Handling buffered range changes
This example creates a ManagedMediaSource, attaches it to a <video> element, fetches a fragmented MP4 file, and listens for the bufferedchange event. When the event fires, it logs the added time 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 video = document.createElement("video");
const source = new ManagedMediaSource();
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 range: ${event.addedRanges.start(i)} - ${event.addedRanges.end(i)}`,
);
}
});
const response = await fetch(videoUrl);
const data = await response.arrayBuffer();
sourceBuffer.appendBuffer(data);
});
}
Specifications
| Specification |
|---|
| Media Source Extensions™ # dom-bufferedchangeevent |