Los elementos de audio y video HTML te permiten cargar, decodificar y reproducir contenido multimedia con solo proporcionar una URL de src:
<video src='foo.webm'></video>
Eso funciona bien en casos de uso simples, pero para técnicas como la transmisión adaptativa, la API de Media Source Extensions (MSE) proporciona más control. MSE permite que las transmisiones se compilen en JavaScript a partir de segmentos de audio o video.
Puedes probar MSE en simpl.info/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 SourceBuffer. Estos actúan como búferes para los segmentos multimedia:
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.
}
Los segmentos de contenido multimedia se “transmiten” a un elemento de audio o video agregando cada segmento a un SourceBuffer con appendBuffer(). En este ejemplo, el video se recupera del servidor y, luego, se almacena con las APIs de File:
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);
}
};
Cómo establecer el 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 reproduzcan de forma continua, en el orden en que se agregaron, sin importar si los segmentos multimedia tenían marcas de tiempo discontinuas al principio.
Usa el atributo mode para especificar el orden de reproducción de los segmentos multimedia. Tiene uno de dos valores:
- segments: La marca de tiempo de cada segmento (que puede haber sido modificada por
timestampOffset) determina el orden de reproducción, independientemente del orden en que se adjunten 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 datos de flujo de bytes cuando se agregan a SourceBuffer, la propiedad mode de SourceBuffer se establecerá en segments. 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 transmisiones y no pueden estar presentes en otros: las marcas de tiempo en banda son inherentes a los tipos de transmisiones 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 segments a sequence. Se mostrará un error si intentas cambiar mode de sequence a segments. En el caso de las transmisiones que tienen marcas de tiempo, es posible cambiar entre segmentos y secuencias, aunque, en la práctica, es probable que eso genere un comportamiento no deseado, difícil de entender o predecir.
Para todos los tipos de transmisiones, puedes cambiar el valor de segments a sequence. Esto significa que los segmentos se reproducirán en el orden en que se agregaron y se generarán nuevas marcas de tiempo según corresponda:
sourceBuffer.mode = 'sequence';
Poder establecer el valor de mode en secuencia garantiza la reproducción continua de contenido multimedia, sin importar si las marcas de tiempo de los segmentos multimedia son discontinuas (por ejemplo, si hubo problemas con el muxing de video o si, por algún motivo, se agregaron segmentos discontinuos). Es posible que una app use el método de polyfill con timestampOffset para garantizar la reproducción continua, si los metadatos de transmisión correctos están disponibles, pero el modo secuencia simplifica el proceso y lo hace menos propenso a errores.
Apps y demostraciones de MSE
Estos muestran el ECM en acción, aunque sin la manipulación de SourceBuffer.mode:
- API de Media Source
- Shaka Player: Demostración de reproductor de video que usa MSE para implementar DASH con la biblioteca de JavaScript de Shaka
Navegadores compatibles
- Chrome 50 y versiones posteriores de forma predeterminada
- Para Firefox, consulta MDN para obtener más detalles.