TheMediaSource interface of theMedia Source Extensions API represents a source of media data for anHTMLMediaElement object. AMediaSource object can be attached to aHTMLMediaElement to be played in the user agent.

Constructor

MediaSource()

Constructs and returns a newMediaSource object with no associated source buffers.

Instance properties

MediaSource.activeSourceBuffersRead only

Returns aSourceBufferList object containing a subset of theSourceBuffer objects contained withinMediaSource.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.handleRead only

Inside a dedicated worker, returns aMediaSourceHandle object, a proxy for theMediaSource that can be transferred from the worker back to the main thread and attached to a media element via itsHTMLMediaElement.srcObject property.

MediaSource.readyStateRead only

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

MediaSource.sourceBuffersRead only

Returns aSourceBufferList object containing the list ofSourceBuffer objects associated with thisMediaSource.

Static properties

MediaSource.canConstructInDedicatedWorkerRead only

A boolean; returnstrue ifMediaSource worker support is implemented, providing a low-latency feature detection mechanism.

Instance methods

Inherits methods from its parent interface,EventTarget.

MediaSource.addSourceBuffer()

Creates a newSourceBuffer of the given MIME type and adds it to theMediaSource.sourceBuffers list.

MediaSource.clearLiveSeekableRange()

Clears a seekable range previously set with a call tosetLiveSeekableRange().

MediaSource.endOfStream()

Signals the end of the stream.

MediaSource.removeSourceBuffer()

Removes the givenSourceBuffer from theMediaSource.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 createSourceBuffer objects for that MIME type.

Events

sourceclose

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

sourceended

Fired when theMediaSource instance is still attached to a media element, butendOfStream() has been called.

sourceopen

Fired when theMediaSource instance has been opened by a media element and is ready for data to be appended to theSourceBuffer objects insourceBuffers.

Examples

Complete basic example

The following simple example loads a video withXMLHttpRequest, playing it as soon as it can. This example was written by Nick Desaulniers and can beviewed live here (you can alsodownload the source for further investigation). The functiongetMediaSource(), which is not defined here, returns aMediaSource.

const video = document.querySelector("video");const assetURL = "frag_bunny.mp4";// Need to be specific for Blink regarding codecs// ./mp4info frag_bunny.mp4 | grep Codecconst 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 aMediaSource in a dedicated worker and passing it to the main thread

Thehandle property can be accessed inside a dedicated worker and the resultingMediaSourceHandle object is then transferred over to the thread that created the worker (in this case the main thread) via apostMessage() call:

// Inside dedicated workerlet mediaSource = new MediaSource();let handle = mediaSource.handle;// Transfer the handle to the context that created the workerpostMessage({ 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 amessage event handler, attach it to a<video> via itsHTMLMediaElement.srcObject property, andplay the video:

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

Specifications

Browser compatibility

See also

• SourceBuffer
• SourceBufferList