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:
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
:
- API de Media Source
- Shaka Player: Demostración del reproductor de video que usa ECM para implementar DASH con la biblioteca JavaScript de Shaka
Navegadores compatibles
- De forma predeterminada, Chrome 50 y versiones posteriores
- En Firefox, consulta MDN para obtener más información.