dom / latest / mediasource.html /

MediaSource

Experimental: This is an experimental technology
Check 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.

EventTarget MediaSource

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.

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.

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.

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

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
31
23-31
12
42
11
18
15-18
8
4.4.3
4.4-4.4.3
31
25-31
41
18
14-18
13
Exposed in Mobile Safari on iPad but not on iPhone.
2.0
1.5-2.0
MediaSource
31
23-31
12
42
11
Only works on Windows 8+.
15
8
4.4.3
33
41
14
13
Exposed in Mobile Safari on iPad but not on iPhone.
2.0
activeSourceBuffers
23
12
42
11
Only works on Windows 8+.
15
8
4.4.3
25
41
14
13
Exposed in Mobile Safari on iPad but not on iPhone.
1.5
addSourceBuffer
23
12
42
11
Only works on Windows 8+.
15
8
4.4.3
25
41
14
13
Exposed in Mobile Safari on iPad but not on iPhone.
1.5
clearLiveSeekableRange
62
17
50
No
49
10.1
62
62
50
46
13
Exposed in Mobile Safari on iPad but not on iPhone.
8.0
duration
23
12
42
11
Only works on Windows 8+.
15
8
4.4.3
25
41
14
13
Exposed in Mobile Safari on iPad but not on iPhone.
1.5
endOfStream
23
12
42
11
Only works on Windows 8+.
15
8
4.4.3
25
41
14
13
Exposed in Mobile Safari on iPad but not on iPhone.
1.5
isTypeSupported
23
12
42
11
Only works on Windows 8+.
15
8
4.4.3
25
41
14
13
Exposed in Mobile Safari on iPad but not on iPhone.
1.5
readyState
23
12
42
11
Only works on Windows 8+.
15
8
4.4.3
33
41
14
13
Exposed in Mobile Safari on iPad but not on iPhone.
2.0
removeSourceBuffer
23
12
42
11
Only works on Windows 8+.
15
8
4.4.3
25
41
14
13
Exposed in Mobile Safari on iPad but not on iPhone.
1.5
setLiveSeekableRange
62
17
50
No
49
10.1
62
62
50
46
13
Exposed in Mobile Safari on iPad but not on iPhone.
8.0
sourceBuffers
23
12
42
11
Only works on Windows 8+.
15
8
4.4.3
25
41
14
13
Exposed in Mobile Safari on iPad but not on iPhone.
1.5
sourceclose_event
53
31-53
The onsourceclose event handler property is not supported.
17
12-17
The onsourceclose event handler property is not supported.
87
42-87
The onsourceclose event handler property is not supported.
11
Only works on Windows 8+.
40
18-40
The onsourceclose event handler property is not supported.
10.1
8-10.1
The onsourceclose event handler property is not supported.
53
4.4.3-53
The onsourceclose event handler property is not supported.
53
31-53
The onsourceclose event handler property is not supported.
87
41-87
The onsourceclose event handler property is not supported.
41
18-41
The onsourceclose event handler property is not supported.
13
Exposed in Mobile Safari on iPad but not on iPhone.
6.0
2.0-6.0
The onsourceclose event handler property is not supported.
sourceended_event
53
31-53
The onsourceended event handler property is not supported.
17
12-17
The onsourceended event handler property is not supported.
42
11
Only works on Windows 8+.
40
18-40
The onsourceended event handler property is not supported.
10.1
8-10.1
The onsourceended event handler property is not supported.
53
4.4.3-53
The onsourceclose event handler property is not supported.
53
31-53
The onsourceended event handler property is not supported.
41
41
18-41
The onsourceended event handler property is not supported.
13
Exposed in Mobile Safari on iPad but not on iPhone.
6.0
2.0-6.0
The onsourceended event handler property is not supported.
sourceopen_event
53
31-53
The onsourceopen event handler property is not supported.
17
12-17
The onsourceopen event handler property is not supported.
42
11
Only works on Windows 8+.
40
18-40
The onsourceopen event handler property is not supported.
10.1
8-10.1
The onsourceopen event handler property is not supported.
53
4.4.3-53
The onsourceopen event handler property is not supported.
53
31-53
The onsourceopen event handler property is not supported.
41
41
18-41
The onsourceopen event handler property is not supported.
13
Exposed in Mobile Safari on iPad but not on iPhone.
6.0
2.0-6.0
The onsourceopen event handler property is not supported.

See also

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