API de fuente de medios: garantiza automáticamente una reproducción sin interrupciones de segmentos multimedia en el orden de apéndice.

Los elementos de audio y video HTML te permiten cargar, decodificar y reproducir contenido multimedia con solo proporcionar una URL src:

    <video src='foo.webm'></video>

Eso funciona bien en casos de uso simples, pero para técnicas como la transmisión adaptable, la API de extensiones de fuente de medios (MSE) proporciona más control. El ECM permite que las transmisiones se compilen en JavaScript a partir de segmentos de audio o video.

Puedes probar el ECM en simpl.info/mse:

Captura de pantalla de un video reproducido con la API de MSE.

El siguiente código es de ese ejemplo.

Un MediaSource representa una fuente de contenido multimedia para un elemento de audio o video. Una vez que se crea una instancia de un objeto MediaSource y se activa su evento open, se pueden agregar elementos SourceBuffer. Estos funcionan como búferes para los segmentos de medios:

var mediaSource = new MediaSource();
video.src = window.URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', function() {
    var sourceBuffer =
        mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"');
    // Get video segments and append them to sourceBuffer.
}

Para "transmitir" los segmentos de medios a un elemento de audio o video, se agrega cada segmento a una SourceBuffer con appendBuffer(). En este ejemplo, el video se recupera del servidor y, luego, se almacena con las API de archivo:

reader.onload = function (e) {
    sourceBuffer.appendBuffer(new Uint8Array(e.target.result));
    if (i === NUM_CHUNKS - 1) {
    mediaSource.endOfStream();
    } else {
    if (video.paused) {
        // start playing after first chunk is appended
        video.play();
    }
    readChunk(++i);
    }
};

Configuración del orden de reproducción

Chrome 50 agrega compatibilidad adicional con el atributo mode de SourceBuffer, lo que te permite especificar que los segmentos multimedia se reproducen continuamente, en el orden en que se agregaron, sin importar si los segmentos multimedia tuvieron marcas de tiempo discontinuas inicialmente.

Usa el atributo mode para especificar el orden de reproducción de los segmentos multimedia. Tiene uno de dos valores:

  • Segmentos: La marca de tiempo de cada segmento (que puede haber sido modificado por timestampOffset) determina el orden de reproducción, independientemente del orden en el que se agreguen los segmentos.
  • secuencia: El orden de los segmentos almacenados en el búfer en el cronograma de contenido multimedia se determina según el orden en que se agregan los segmentos a SourceBuffer.

Si los segmentos multimedia tienen marcas de tiempo analizadas a partir de los datos de flujo de bytes cuando se agregan a SourceBuffer, la propiedad mode de SourceBuffer se establecerá en segmentos. De lo contrario, mode se establecerá como secuencia. Ten en cuenta que las marcas de tiempo no son opcionales. Deben estar presentes en la mayoría de los tipos de transmisión y no para otros: las marcas de tiempo dentro de banda son inherentes a los tipos de transmisión que las contienen.

Establecer el atributo mode es opcional. En el caso de las transmisiones que no contienen marcas de tiempo (audio/mpeg y audio/aac), mode solo se puede cambiar de segmentos a secuencia. Se mostrará un error si intentas cambiar mode de secuencia a segmentos. En el caso de las transmisiones con marcas de tiempo, es posible alternar entre segmentos y secuencias, aunque, en la práctica, esto probablemente generaría un comportamiento no deseado, difícil de entender o de predecir.

Puedes cambiar el valor de segmentos a secuencia en todos los tipos de transmisión. Esto significa que los segmentos se reproducirán en el orden en que se agregaron y que se generarán nuevas marcas de tiempo según corresponda:

sourceBuffer.mode = 'sequence';

Poder establecer el valor mode en secuencia garantiza la reproducción continua de contenido multimedia, sin importar si las marcas de tiempo de los segmentos multimedia no eran continuas; por ejemplo, si hubo problemas con la muxing de video o si (por algún motivo) se agregaron segmentos no continuos. Es posible que una app polyfill con timestampOffset para garantizar la reproducción continua si hay metadatos de transmisión correctos disponibles, pero el modo secuencia simplifica el proceso y disminuye la probabilidad de errores.

Apps y demostraciones de ECM

Estos muestran el ECM en acción, aunque sin manipulación de SourceBuffer.mode:

Navegadores compatibles

  • De forma predeterminada, Chrome 50 y versiones posteriores
  • En Firefox, consulta MDN para obtener más información.

Especificación

Información de la API