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 ManagedMediaSource() constructor of the ManagedMediaSource interface constructs and returns a new ManagedMediaSource object instance with no associated source buffers.
new ManagedMediaSource()None.
A new ManagedMediaSource object instance.
The following example creates a new ManagedMediaSource, attaches it to a <video> element, and uses the startstreaming event to begin fetching media data.
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", () => {
const sourceBuffer = source.addSourceBuffer(mediaType);
source.addEventListener("startstreaming", async () => {
console.log("startstreaming — fetching media data");
const response = await fetch(videoUrl);
const data = await response.arrayBuffer();
sourceBuffer.appendBuffer(data);
});
});
}