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.
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
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()Experimental-
Creates and returns a new
BufferedChangeEventobject.
Instance properties
Also inherits properties from its parent interface, Event.
BufferedChangeEvent.addedRangesRead only Experimental-
A
TimeRangesobject representing the time ranges that were added to theManagedSourceBuffer's buffer. BufferedChangeEvent.removedRangesRead only Experimental-
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 |