{{APIRef("Media Source Extensions")}}{{SeeCompatTable}}
The MediaSource
interface represents a source of media data for an {{domxref("HTMLMediaElement")}} object. A MediaSource
object can be attached to a {{domxref("HTMLMediaElement")}} to be played in the user agent.
Constructor
- {{domxref("MediaSource.MediaSource", "MediaSource()")}} {{readonlyInline}}
- Constructs and returns a new
MediaSource
object with no associated source buffers.
Properties
Inherits properties from its parent interface, {{domxref("EventTarget")}}.
- {{domxref("MediaSource.sourceBuffers")}} {{readonlyInline}}
- Returns a {{domxref("SourceBufferList")}} object containing the list of {{domxref("SourceBuffer")}} objects associated with this
MediaSource
. - {{domxref("MediaSource.activeSourceBuffers")}} {{readonlyInline}}
- Returns a {{domxref("SourceBufferList")}} object containing a subset of the {{domxref("SourceBuffer")}} objects contained within {{domxref("SourceBuffers")}} — the list of objects providing the selected video track, enabled audio tracks, and shown/hidden text tracks.
- {{domxref("MediaSource.readyState")}} {{readonlyInline}}
- 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 {{domxref("SourceBuffer")}} objects (open
), or attached but the stream has been ended via {{domxref("MediaSource.endOfStream()")}} (ended
.) - {{domxref("MediaSource.duration")}}
- Gets and sets the duration of the current media being presented.
Methods
Inherits properties from its parent interface, {{domxref("EventTarget")}}.
- {{domxref("MediaSource.addSourceBuffer()")}}
- Creates a new {{domxref("SourceBuffer")}} of the given MIME type and adds it to the
MediaSource
's {{domxref("SourceBuffers")}} list. - {{domxref("MediaSource.removeSourceBuffer()")}}
- Removes the given {{domxref("SourceBuffer")}} from the {{domxref("SourceBuffers")}} list associated with this
MediaSource
object. - {{domxref("MediaSource.endOfStream()")}}
- Signals the end of the stream.
-
Static methods
- {{domxref("MediaSource.isTypeSupported()")}}
- Returns a {{domxref("Boolean")}} value indicating if the given MIME type is supported by the current user agent — this is, if it can successfully create {{domxref("SourceBuffer")}} objects for that MIME type.
Examples
The following simple example loads a video chunk by chunk as fast as possible, 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 |
---|---|---|
{{SpecName('Media Source Extensions', '#mediasource', 'MediaSource')}} | {{Spec2('Media Source Extensions')}} | Initial definition. |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 23 | {{CompatGeckoDesktop("25.0")}} [1] | 11 [2] | 15 | 8 |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | {{CompatNo}} | 30 | {{CompatGeckoMobile("25.0")}} [1] | Windows 8.1 | {{CompatNo}} | {{CompatNo}} |
[1] Available after switching the about:config
preference media.mediasource.enabled
to true
.
[2] Internet Explorer supports MediaSource only on Windows 8
See also
- {{domxref("SourceBuffer")}}
- {{domxref("SourceBufferList")}}