W3cubDocs

/Web APIs

MediaSource

The MediaSource interface of the Media Source Extensions API represents a source of media data for an HTMLMediaElement object. A MediaSource object can be attached to a HTMLMediaElement to be played in the user agent.

EventTarget MediaSource

Constructor

MediaSource()

Constructs and returns a new MediaSource object with no associated source buffers.

Instance properties

MediaSource.activeSourceBuffers Read only

Returns a SourceBufferList object containing a subset of the SourceBuffer objects contained within MediaSource.sourceBuffers — the list of objects providing the selected video track, enabled audio tracks, and shown/hidden text tracks.

MediaSource.duration

Gets and sets the duration of the current media being presented.

MediaSource.handle Read only Experimental

Inside a dedicated worker, returns a MediaSourceHandle object, a proxy for the MediaSource that can be transferred from the worker back to the main thread and attached to a media element via its HTMLMediaElement.srcObject property.

MediaSource.readyState Read only

Returns an enum representing the state of the current MediaSource, whether it is not currently attached to a media element (closed), attached and ready to receive SourceBuffer objects (open), or attached but the stream has been ended via MediaSource.endOfStream() (ended.)

MediaSource.sourceBuffers Read only

Returns a SourceBufferList object containing the list of SourceBuffer objects associated with this MediaSource.

Static properties

MediaSource.canConstructInDedicatedWorker Read only Experimental

A boolean; returns true if MediaSource worker support is implemented, providing a low-latency feature detection mechanism.

Instance methods

Inherits methods from its parent interface, EventTarget.

MediaSource.addSourceBuffer()

Creates a new SourceBuffer of the given MIME type and adds it to the MediaSource.sourceBuffers list.

MediaSource.clearLiveSeekableRange()

Clears a seekable range previously set with a call to setLiveSeekableRange().

MediaSource.endOfStream()

Signals the end of the stream.

MediaSource.removeSourceBuffer()

Removes the given SourceBuffer from the MediaSource.sourceBuffers list.

MediaSource.setLiveSeekableRange()

Sets the range that the user can seek to in the media element.

Static methods

MediaSource.isTypeSupported()

Returns a boolean value indicating if the given MIME type is supported by the current user agent — this is, if it can successfully create SourceBuffer objects for that MIME type.

Events

sourceclose

Fired when the MediaSource instance is not attached to a media element anymore.

sourceended

Fired when the MediaSource instance is still attached to a media element, but endOfStream() has been called.

sourceopen

Fired when the MediaSource instance has been opened by a media element and is ready for data to be appended to the SourceBuffer objects in sourceBuffers.

Examples

Complete basic example

The following simple example loads a video with XMLHttpRequest, playing it as soon as it can. This example was written by Nick Desaulniers and can be viewed live here (you can also download the source for further investigation). The function getMediaSource(), which is not defined here, returns a MediaSource.

js

const video = document.querySelector("video");

const assetURL = "frag_bunny.mp4";
// Need to be specific for Blink regarding codecs
// ./mp4info frag_bunny.mp4 | grep Codec
const mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
let mediaSource;

if ("MediaSource" in window && MediaSource.isTypeSupported(mimeCodec)) {
  mediaSource = getMediaSource();
  console.log(mediaSource.readyState); // closed
  video.src = URL.createObjectURL(mediaSource);
  mediaSource.addEventListener("sourceopen", sourceOpen);
} else {
  console.error("Unsupported MIME type or codec: ", mimeCodec);
}

function sourceOpen() {
  console.log(this.readyState); // open
  const sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
  fetchAB(assetURL, (buf) => {
    sourceBuffer.addEventListener("updateend", () => {
      mediaSource.endOfStream();
      video.play();
      console.log(mediaSource.readyState); // ended
    });
    sourceBuffer.appendBuffer(buf);
  });
}

function fetchAB(url, cb) {
  console.log(url);
  const xhr = new XMLHttpRequest();
  xhr.open("get", url);
  xhr.responseType = "arraybuffer";
  xhr.onload = () => {
    cb(xhr.response);
  };
  xhr.send();
}

Constructing a MediaSource in a dedicated worker and passing it to the main thread

The handle property can be accessed inside a dedicated worker and the resulting MediaSourceHandle object is then transferred over to the thread that created the worker (in this case the main thread) via a postMessage() call:

js

// Inside dedicated worker
let mediaSource = new MediaSource();
let handle = mediaSource.handle;
// Transfer the handle to the context that created the worker
postMessage({ arg: handle }, [handle]);

mediaSource.addEventListener("sourceopen", () => {
  // Await sourceopen on MediaSource before creating SourceBuffers
  // and populating them with fetched media — MediaSource won't
  // accept creation of SourceBuffers until it is attached to the
  // HTMLMediaElement and its readyState is "open"
});

Over in the main thread, we receive the handle via a message event handler, attach it to a <video> via its HTMLMediaElement.srcObject property, and play the video:

js

worker.addEventListener("message", (msg) => {
  let mediaSourceHandle = msg.data.arg;
  video.srcObject = mediaSourceHandle;
  video.play();
});

Note: MediaSourceHandles cannot be successfully transferred into or via a shared worker or service worker.

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
MediaSource 3123–31 12 42
11Only works on Windows 8+.
15 8 4.4.3 33 41 14
13Exposed in Mobile Safari on iPad but not on iPhone.
2.0
MediaSource 3123–31 12 42 11 1815–18 8 4.4.34.4–4.4.3 3125–31 41 1814–18
13Exposed in Mobile Safari on iPad but not on iPhone.
2.01.5–2.0
activeSourceBuffers 23 12 42
11Only works on Windows 8+.
15 8 4.4.3 25 41 14
13Exposed in Mobile Safari on iPad but not on iPhone.
1.5
addSourceBuffer 23 12 42
11Only works on Windows 8+.
15 8 4.4.3 25 41 14
13Exposed in Mobile Safari on iPad but not on iPhone.
1.5
canConstructInDedicatedWorker_static 108 108 No No 94 No 108 108 No 73 No 21.0
clearLiveSeekableRange 62 17 50 No 49 10.1 62 62 50 46
13Exposed in Mobile Safari on iPad but not on iPhone.
8.0
duration 23 12 42
11Only works on Windows 8+.
15 8 4.4.3 25 41 14
13Exposed in Mobile Safari on iPad but not on iPhone.
1.5
endOfStream 23 12 42
11Only works on Windows 8+.
15 8 4.4.3 25 41 14
13Exposed in Mobile Safari on iPad but not on iPhone.
1.5
handle 108 108 No No 94 No 108 108 No 73 No 21.0
isTypeSupported_static
23["codecs string can contain any subset of optional parameters (should be all or none).", "Errors if codecs string contains unexpected characters (should evaluate string up to character)."]
12["codecs string can contain any subset of optional parameters (should be all or none).", "Errors if codecs string contains unexpected characters (should evaluate string up to character)."]
42Before Firefox 101, isTypeSupported() ignored codecs parameter options for av01 codecs (treating them as av1).
11Only works on Windows 8+.
15["codecs string can contain any subset of optional parameters (should be all or none).", "Errors if codecs string contains unexpected characters (should evaluate string up to character)."]
8
4.4.3["codecs string can contain any subset of optional parameters (should be all or none).", "Errors if codecs string contains unexpected characters (should evaluate string up to character)."]
25["codecs string can contain any subset of optional parameters (should be all or none).", "Errors if codecs string contains unexpected characters (should evaluate string up to character)."]
41Before Firefox 101, isTypeSupported() ignored codecs parameter options for av01 codecs (treating them as av1).
14["codecs string can contain any subset of optional parameters (should be all or none).", "Errors if codecs string contains unexpected characters (should evaluate string up to character)."]
13Exposed in Mobile Safari on iPad but not on iPhone.
1.5["codecs string can contain any subset of optional parameters (should be all or none).", "Errors if codecs string contains unexpected characters (should evaluate string up to character)."]
readyState 23 12 42
11Only works on Windows 8+.
15 8 4.4.3 33 41 14
13Exposed in Mobile Safari on iPad but not on iPhone.
2.0
removeSourceBuffer 23 12 42
11Only works on Windows 8+.
15 8 4.4.3 25 41 14
13Exposed in Mobile Safari on iPad but not on iPhone.
1.5
setLiveSeekableRange 62 17 50 No 49 10.1 62 62 50 46
13Exposed in Mobile Safari on iPad but not on iPhone.
8.0
sourceBuffers 23 12 42
11Only works on Windows 8+.
15 8 4.4.3 25 41 14
13Exposed in Mobile Safari on iPad but not on iPhone.
1.5
sourceclose_event 53
31–53The onsourceclose event handler property is not supported.
17
12–17The onsourceclose event handler property is not supported.
87
42–87The onsourceclose event handler property is not supported.
11Only works on Windows 8+.
40
18–40The onsourceclose event handler property is not supported.
10.1
8–10.1The onsourceclose event handler property is not supported.
53
4.4.3–53The onsourceclose event handler property is not supported.
53
31–53The onsourceclose event handler property is not supported.
87
41–87The onsourceclose event handler property is not supported.
41
18–41The onsourceclose event handler property is not supported.
13Exposed in Mobile Safari on iPad but not on iPhone.
6.0
2.0–6.0The onsourceclose event handler property is not supported.
sourceended_event 53
31–53The onsourceended event handler property is not supported.
17
12–17The onsourceended event handler property is not supported.
42
11Only works on Windows 8+.
40
18–40The onsourceended event handler property is not supported.
10.1
8–10.1The onsourceended event handler property is not supported.
53
4.4.3–53The onsourceclose event handler property is not supported.
53
31–53The onsourceended event handler property is not supported.
41 41
18–41The onsourceended event handler property is not supported.
13Exposed in Mobile Safari on iPad but not on iPhone.
6.0
2.0–6.0The onsourceended event handler property is not supported.
sourceopen_event 53
31–53The onsourceopen event handler property is not supported.
17
12–17The onsourceopen event handler property is not supported.
42
11Only works on Windows 8+.
40
18–40The onsourceopen event handler property is not supported.
10.1
8–10.1The onsourceopen event handler property is not supported.
53
4.4.3–53The onsourceopen event handler property is not supported.
53
31–53The onsourceopen event handler property is not supported.
41 41
18–41The onsourceopen event handler property is not supported.
13Exposed in Mobile Safari on iPad but not on iPhone.
6.0
2.0–6.0The onsourceopen event handler property is not supported.
worker_support 108 108 No No 94 No 108 108 No 73 No 21.0

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/MediaSource