Web/API/MediaSource

This is an experimental technologyCheck the Browser compatibility table carefully before using this in production.

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.

  <div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveAspectRatio="xMinYMin meet"><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="56" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">EventTarget</text></a><polyline points="111,25  121,20  121,30  111,25" stroke="#D4DDE4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/MediaSource" target="_top"><rect x="151" y="1" width="110" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text  x="206" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">MediaSource</text></a></svg></div>

  a:hover text { fill: #0095DD; pointer-events: all;}

Constructor

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

Properties

MediaSource.sourceBuffers Read only: Returns a SourceBufferList object containing the list of SourceBuffer objects associated with this MediaSource.
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.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.duration: Gets and sets the duration of the current media being presented.

Event handlers

MediaSource.onsourceclose: The event handler for the sourceclose event.
MediaSource.onsourceended: The event handler for the sourceended event.
MediaSource.onsourceopen: The event handler for the sourceopen event.

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.

Examples

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.)

var video = document.querySelector('video');

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

if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {
  var mediaSource = new MediaSource();
  //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
  var mediaSource = this;
  var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
  fetchAB(assetURL, function (buf) {
    sourceBuffer.addEventListener('updateend', function (_) {
      mediaSource.endOfStream();
      video.play();
      //console.log(mediaSource.readyState); // ended
    });
    sourceBuffer.appendBuffer(buf);
  });
};

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

Specifications

Specification	Status	Comment
Media Source ExtensionsThe definition of 'MediaSource' in that specification.	Recommendation	Initial definition.

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`MediaSource` Experimental'	Chrome Full support 31 Full support 31 No support 23 — 31 Prefixed' Prefixed' Implemented with the vendor prefix: WebKit	Edge Full support 12	Firefox Full support 42 Full support 42 No support 25 — 42 Notes' Disabled' Notes' Limited support to an allowed list of sites, for example YouTube, Netflix, and other popular streaming sites. The limitation was removed when Media Source Extensions was enabled by default in Firefox 42. Disabled' From version 25 until version 42 (exclusive): this feature is behind the `media.mediasource.enabled` preference. To change preferences in Firefox, visit about:config.	IE Full support 11	Opera Full support 18 Full support 18 No support 15 — 18 Prefixed' Prefixed' Implemented with the vendor prefix: WebKit	Safari Full support 8	WebView Android Full support 4.4.3	Chrome Android Full support 31 Full support 31 No support 25 — 31 Prefixed' Prefixed' Implemented with the vendor prefix: WebKit	Firefox Android Full support 41	Opera Android Full support 18 Full support 18 No support 14 — 18 Prefixed' Prefixed' Implemented with the vendor prefix: WebKit	Safari iOS Full support 8	Samsung Internet Android Full support 2.0 Full support 2.0 No support 1.5 — 2.0 Prefixed' Prefixed' Implemented with the vendor prefix: WebKit
`MediaSource()` constructor Experimental'	Chrome Full support 31 Full support 31 No support 23 — 31 Prefixed' Prefixed' Implemented with the vendor prefix: WebKit	Edge Full support 12	Firefox Full support 42 Full support 42 No support 25 — 42 Notes' Disabled' Notes' Limited support to an allowed list of sites, for example YouTube, Netflix, and other popular streaming sites. The limitation was removed when Media Source Extensions was enabled by default in Firefox 42. Disabled' From version 25 until version 42 (exclusive): this feature is behind the `media.mediasource.enabled` preference. To change preferences in Firefox, visit about:config.	IE Full support 11 Notes' Full support 11 Notes' Notes' Only works on Windows 8+.	Opera Full support 15	Safari Full support 8	WebView Android Full support 4.4.3	Chrome Android Full support 33	Firefox Android Full support 41	Opera Android Full support 14	Safari iOS No support No	Samsung Internet Android Full support 2.0
`activeSourceBuffers` Experimental'	Chrome Full support 23	Edge Full support 12	Firefox Full support 42 Full support 42 No support 25 — 42 Notes' Disabled' Notes' Limited support to an allowed list of sites, for example YouTube, Netflix, and other popular streaming sites. The limitation was removed when Media Source Extensions was enabled by default in Firefox 42. Disabled' From version 25 until version 42 (exclusive): this feature is behind the `media.mediasource.enabled` preference. To change preferences in Firefox, visit about:config.	IE Full support 11 Notes' Full support 11 Notes' Notes' Only works on Windows 8+.	Opera Full support 15	Safari Full support 8	WebView Android Full support 4.4.3	Chrome Android Full support 25	Firefox Android Full support 41	Opera Android Full support 14	Safari iOS No support No	Samsung Internet Android Full support 1.5
`addSourceBuffer` Experimental'	Chrome Full support 23	Edge Full support 12	Firefox Full support 42 Full support 42 No support 25 — 42 Notes' Disabled' Notes' Limited support to an allowed list of sites, for example YouTube, Netflix, and other popular streaming sites. The limitation was removed when Media Source Extensions was enabled by default in Firefox 42. Disabled' From version 25 until version 42 (exclusive): this feature is behind the `media.mediasource.enabled` preference. To change preferences in Firefox, visit about:config.	IE Full support 11 Notes' Full support 11 Notes' Notes' Only works on Windows 8+.	Opera Full support 15	Safari Full support 8	WebView Android Full support 4.4.3	Chrome Android Full support 25	Firefox Android Full support 41	Opera Android Full support 14	Safari iOS No support No	Samsung Internet Android Full support 1.5
`clearLiveSeekableRange` Experimental'	Chrome Full support 62	Edge Full support 17	Firefox No support No	IE No support No	Opera Full support 49	Safari No support No	WebView Android Full support 62	Chrome Android Full support 62	Firefox Android ?	Opera Android Full support 46	Safari iOS No support No	Samsung Internet Android Full support 8.0
`duration` Experimental'	Chrome Full support 23	Edge Full support 12	Firefox Full support 42 Full support 42 No support 25 — 42 Notes' Disabled' Notes' Limited support to an allowed list of sites, for example YouTube, Netflix, and other popular streaming sites. The limitation was removed when Media Source Extensions was enabled by default in Firefox 42. Disabled' From version 25 until version 42 (exclusive): this feature is behind the `media.mediasource.enabled` preference. To change preferences in Firefox, visit about:config.	IE Full support 11 Notes' Full support 11 Notes' Notes' Only works on Windows 8+.	Opera Full support 15	Safari Full support 8	WebView Android Full support 4.4.3	Chrome Android Full support 25	Firefox Android Full support 41	Opera Android Full support 14	Safari iOS No support No	Samsung Internet Android Full support 1.5
`endOfStream` Experimental'	Chrome Full support 23	Edge Full support 12	Firefox Full support 42 Full support 42 No support 25 — 42 Notes' Disabled' Notes' Limited support to an allowed list of sites, for example YouTube, Netflix, and other popular streaming sites. The limitation was removed when Media Source Extensions was enabled by default in Firefox 42. Disabled' From version 25 until version 42 (exclusive): this feature is behind the `media.mediasource.enabled` preference. To change preferences in Firefox, visit about:config.	IE Full support 11 Notes' Full support 11 Notes' Notes' Only works on Windows 8+.	Opera Full support 15	Safari Full support 8	WebView Android Full support 4.4.3	Chrome Android Full support 25	Firefox Android Full support 41	Opera Android Full support 14	Safari iOS No support No	Samsung Internet Android Full support 1.5
`isTypeSupported` Experimental'	Chrome Full support 23	Edge Full support 12	Firefox Full support 42 Full support 42 No support 25 — 42 Notes' Disabled' Notes' Limited support to an allowed list of sites, for example YouTube, Netflix, and other popular streaming sites. The limitation was removed when Media Source Extensions was enabled by default in Firefox 42. Disabled' From version 25 until version 42 (exclusive): this feature is behind the `media.mediasource.enabled` preference. To change preferences in Firefox, visit about:config.	IE Full support 11 Notes' Full support 11 Notes' Notes' Only works on Windows 8+.	Opera Full support 15	Safari Full support 8	WebView Android Full support 4.4.3	Chrome Android Full support 25	Firefox Android Full support 41	Opera Android Full support 14	Safari iOS No support No	Samsung Internet Android Full support 1.5
`onsourceclose` Experimental'	Chrome Full support 53	Edge Full support 17	Firefox Full support 42 Full support 42 No support 25 — 42 Notes' Disabled' Notes' Limited support to an allowed list of sites, for example YouTube, Netflix, and other popular streaming sites. The limitation was removed when Media Source Extensions was enabled by default in Firefox 42. Disabled' From version 25 until version 42 (exclusive): this feature is behind the `media.mediasource.enabled` preference. To change preferences in Firefox, visit about:config.	IE Full support 11 Notes' Full support 11 Notes' Notes' Only works on Windows 8+.	Opera Full support 15	Safari Full support 8	WebView Android Full support 4.4.3	Chrome Android Full support 33	Firefox Android Full support 41	Opera Android Full support 14	Safari iOS No support No	Samsung Internet Android Full support 2.0
`onsourceended` Experimental'	Chrome Full support 53	Edge Full support 17	Firefox Full support 42 Full support 42 No support 25 — 42 Notes' Disabled' Notes' Limited support to an allowed list of sites, for example YouTube, Netflix, and other popular streaming sites. The limitation was removed when Media Source Extensions was enabled by default in Firefox 42. Disabled' From version 25 until version 42 (exclusive): this feature is behind the `media.mediasource.enabled` preference. To change preferences in Firefox, visit about:config.	IE Full support 11 Notes' Full support 11 Notes' Notes' Only works on Windows 8+.	Opera Full support 15	Safari Full support 8	WebView Android Full support 4.4.3	Chrome Android Full support 33	Firefox Android Full support 41	Opera Android Full support 14	Safari iOS No support No	Samsung Internet Android Full support 2.0
`onsourceopen` Experimental'	Chrome Full support 53	Edge Full support 17	Firefox Full support 42 Full support 42 No support 25 — 42 Notes' Disabled' Notes' Limited support to an allowed list of sites, for example YouTube, Netflix, and other popular streaming sites. The limitation was removed when Media Source Extensions was enabled by default in Firefox 42. Disabled' From version 25 until version 42 (exclusive): this feature is behind the `media.mediasource.enabled` preference. To change preferences in Firefox, visit about:config.	IE Full support 11 Notes' Full support 11 Notes' Notes' Only works on Windows 8+.	Opera Full support 15	Safari Full support 8	WebView Android Full support 4.4.3	Chrome Android Full support 33	Firefox Android Full support 41	Opera Android Full support 14	Safari iOS No support No	Samsung Internet Android Full support 2.0
`readyState` Experimental'	Chrome Full support 23	Edge Full support 12	Firefox Full support 42 Full support 42 No support 25 — 42 Notes' Disabled' Notes' Limited support to an allowed list of sites, for example YouTube, Netflix, and other popular streaming sites. The limitation was removed when Media Source Extensions was enabled by default in Firefox 42. Disabled' From version 25 until version 42 (exclusive): this feature is behind the `media.mediasource.enabled` preference. To change preferences in Firefox, visit about:config.	IE Full support 11 Notes' Full support 11 Notes' Notes' Only works on Windows 8+.	Opera Full support 15	Safari Full support 8	WebView Android Full support 4.4.3	Chrome Android Full support 33	Firefox Android Full support 41	Opera Android Full support 14	Safari iOS No support No	Samsung Internet Android Full support 2.0
`removeSourceBuffer` Experimental'	Chrome Full support 23	Edge Full support 12	Firefox Full support 42 Full support 42 No support 25 — 42 Notes' Disabled' Notes' Limited support to an allowed list of sites, for example YouTube, Netflix, and other popular streaming sites. The limitation was removed when Media Source Extensions was enabled by default in Firefox 42. Disabled' From version 25 until version 42 (exclusive): this feature is behind the `media.mediasource.enabled` preference. To change preferences in Firefox, visit about:config.	IE Full support 11 Notes' Full support 11 Notes' Notes' Only works on Windows 8+.	Opera Full support 15	Safari Full support 8	WebView Android Full support 4.4.3	Chrome Android Full support 25	Firefox Android Full support 41	Opera Android Full support 14	Safari iOS No support No	Samsung Internet Android Full support 1.5
`setLiveSeekableRange` Experimental'	Chrome Full support 62	Edge Full support 17	Firefox No support No	IE No support No	Opera Full support 49	Safari No support No	WebView Android Full support 62	Chrome Android Full support 62	Firefox Android ?	Opera Android Full support 46	Safari iOS No support No	Samsung Internet Android Full support 8.0
`sourceBuffers` Experimental'	Chrome Full support 23	Edge Full support 12	Firefox Full support 42 Full support 42 No support 25 — 42 Notes' Disabled' Notes' Limited support to an allowed list of sites, for example YouTube, Netflix, and other popular streaming sites. The limitation was removed when Media Source Extensions was enabled by default in Firefox 42. Disabled' From version 25 until version 42 (exclusive): this feature is behind the `media.mediasource.enabled` preference. To change preferences in Firefox, visit about:config.	IE Full support 11 Notes' Full support 11 Notes' Notes' Only works on Windows 8+.	Opera Full support 15	Safari Full support 8	WebView Android Full support 4.4.3	Chrome Android Full support 25	Firefox Android Full support 41	Opera Android Full support 14	Safari iOS No support No	Samsung Internet Android Full support 1.5

Legend

Full support: Full support
No support: No support
Compatibility unknown: Compatibility unknown
Experimental. Expect behavior to change in the future.': Experimental. Expect behavior to change in the future.
See implementation notes.': See implementation notes.
User must explicitly enable this feature.': User must explicitly enable this feature.
Requires a vendor prefix or different name for use.': Requires a vendor prefix or different name for use.