This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.
The MediaSource
interface 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.
Constructor
MediaSource()
- Constructs and returns a new
MediaSource
object with no associated source buffers.
Properties
Inherits properties from its parent interface, EventTarget
.
MediaSource.sourceBuffers
Read only- Returns a
SourceBufferList
object containing the list ofSourceBuffer
objects associated with thisMediaSource
. MediaSource.activeSourceBuffers
Read only- Returns a
SourceBufferList
object containing a subset of theSourceBuffer
objects contained withinSourceBuffers
— 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 receiveSourceBuffer
objects (open
), or attached but the stream has been ended viaMediaSource.endOfStream()
(ended
.) MediaSource.duration
- Gets and sets the duration of the current media being presented.
Methods
Inherits properties from its parent interface, EventTarget
.
MediaSource.addSourceBuffer()
- Creates a new
SourceBuffer
of the given MIME type and adds it to theMediaSource
'sSourceBuffers
list. MediaSource.removeSourceBuffer()
- Removes the given
SourceBuffer
from theSourceBuffers
list associated with thisMediaSource
object. MediaSource.endOfStream()
- Signals the end of the stream.
-
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.
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 |
---|---|---|
Media Source Extensions The definition of 'MediaSource' in that specification. |
Candidate Recommendation | Initial definition. |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 23 | 25.0 (25.0)[1] 42.0 (42.0) |
11[2] | 15 | 8 |
Feature | Android | Firefox Mobile (Gecko) | Firefox OS (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | 4.4.4 |
41.0 |
41.0 | 11 | 30 | No support |
[1] Available after switching the about:config
preference media.mediasource.enabled
to true
. In addition, support was limited to a whitelist of sites, for example YouTube, Netflix, and other popular streaming sites. The whitelist was removed and Media Source Extensions was enabled by default in 42+ for all sites.
[2] Only works on Windows 8+.