MediaSource

Description

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.

Properties

• MediaSource.sourceBuffers
  Returns a SourceBufferList object containing the list of SourceBuffer objects associated with this MediaSource.

• MediaSource.activeSourceBuffers
  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
  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.

EventHandler

• 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.removeSourceBuffer()
  Removes the given SourceBuffer from the MediaSource.sourceBuffers list.

• MediaSource.endOfStream()
  Signals the end of the stream.

• MediaSource.setLiveSeekableRange()
  Sets the range that the user can seek to in the media element.

• MediaSource.clearLiveSeekableRange()
  Clears the live seekable range.

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();

};