ManagedMediaSource

Available in workersLimited availability

The ManagedMediaSource interface of the Media Source Extensions API is a MediaSource that actively manages its memory content. Unlike a regular MediaSource, the user agent can evict content from its ManagedSourceBuffer objects at any time, for reasons such as memory or hardware limitations. This makes it suitable for power-efficient streaming scenarios where the user agent needs more control over buffered media data.

When addSourceBuffer() is called on a ManagedMediaSource, it creates ManagedSourceBuffer objects (instead of SourceBuffer objects), which fire bufferedchange events to notify the application when buffered ranges are modified by the user agent.

[!NOTE] On Safari, ManagedMediaSource only activates when remote playback is explicitly disabled on the media element (by setting disableRemotePlayback to true), or when an AirPlay source alternative is provided (for example, an HLS <source> element). Without either of these, the sourceopen event will not fire.

Constructor

• ManagedMediaSource() Experimental
  • : Creates and returns a new ManagedMediaSource object instance with no associated source buffers.

Instance properties

Also inherits properties from its parent interface, MediaSource.

• streaming Read only Experimental
  • : A boolean indicating whether the ManagedMediaSource object is currently streaming. When true, the application should actively fetch and append media data. When false, the application can stop fetching new data.

Instance methods

Inherits methods from its parent interface, MediaSource.

Events

Also inherits events from its parent interface, MediaSource.

• startstreaming Experimental
  • : Fired when the ManagedMediaSource’s streaming property changes from false to true, meaning the media source has started streaming.
• endstreaming Experimental
  • : Fired when the ManagedMediaSource’s streaming property changes from true to false, meaning the media source has stopped streaming.

Examples

Setting up a managed media source

The following example sets up a ManagedMediaSource, connects it to a <video> element, and listens for the startstreaming and endstreaming events to control when media data is fetched. bufferedchange events are logged below the video.

const videoUrl =
  "https://mdn.github.io/shared-assets/videos/flower-fragmented.mp4";
const mediaType = 'video/mp4; codecs="avc1.64001F, mp4a.40.2"';
const video = document.querySelector("video");

if (!window.ManagedMediaSource?.isTypeSupported(mediaType)) {
  console.log("ManagedMediaSource is not supported in this browser.");
} else {
  const source = new ManagedMediaSource();
  video.disableRemotePlayback = true;
  video.src = URL.createObjectURL(source);

  source.addEventListener("sourceopen", () => {
    const sourceBuffer = source.addSourceBuffer(mediaType);

    sourceBuffer.addEventListener("bufferedchange", (event) => {
      for (let i = 0; i < event.addedRanges.length; i++) {
        console.log(
          `Buffered: ${event.addedRanges.start(i).toFixed(2)}s – ${event.addedRanges.end(i).toFixed(2)}s`,
        );
      }
    });

    source.addEventListener("startstreaming", async () => {
      console.log("startstreaming — fetching media data…");
      const response = await fetch(videoUrl);
      const data = await response.arrayBuffer();
      sourceBuffer.appendBuffer(data);
    });

    source.addEventListener("endstreaming", () => {
      console.log("endstreaming — enough data buffered");
    });
  });
}

100%

Specifications

Browser compatibility

See also

• MediaSource
• ManagedSourceBuffer
• BufferedChangeEvent
• SourceBuffer