Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

Esta es una tecnología experimental
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

El MediaSource interfaz representa un recurso de media en datos por un HTMLMediaElement objeto. Un MediaSource objeto puede ser atribuido a un HTMLMediaElement para ser reproducido por el usuario.

Constructor

MediaSource()
construye y retorna un MediaSource objeto sin asociar un recurso con buffers.

Propiedades

Inherits properties from its parent interface, EventTarget.

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 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 properties from its parent interface, EventTarget.

MediaSource.addSourceBuffer()
Creates a new SourceBuffer of the given MIME type and adds it to the MediaSource's SourceBuffers list.
MediaSource.removeSourceBuffer()
Removes the given SourceBuffer from the SourceBuffers list associated with this MediaSource 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 create 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
Media Source Extensions
La definición de 'MediaSource' en esta especificación.
Recommendation Initial definition.

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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

Sin soporte

Sin soporte 11 30 Sin soporte

[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+.

See also

Etiquetas y colaboradores del documento

Colaboradores en esta página: Lazaro
Última actualización por: Lazaro,