En este artículo, obtendrás información sobre el concepto más avanzado de la transmisión de contenido multimedia y, cuando termines, comprenderás en detalle los diversos casos de uso, protocolos y extensiones de transmisión. Comencemos con una explicación de qué es realmente la transmisión.
La transmisión de contenido multimedia es una forma de entregar y reproducir contenido multimedia por partes. En lugar de cargar un solo archivo, que puede ser lento si no está optimizado para la red, el reproductor lee un archivo de manifiesto que describe cómo se divide el contenido multimedia de destino en fragmentos de datos individuales. Luego, los fragmentos de contenido multimedia se vuelven a unir de forma dinámica durante el tiempo de ejecución, probablemente con diferentes bitrates, sobre los que aprenderás más adelante.
Ten en cuenta que, para ofrecer transmisión en tu sitio web, el servidor debe admitir el encabezado de solicitud HTTP Range. Obtén más información sobre el encabezado Accept-Ranges en el artículo Etiquetas <video> y <source>.
Casos de uso de transmisión
Producir fragmentos de contenido multimedia y los manifiestos necesarios que describen la transmisión no es del todo sencillo, pero la transmisión desbloquea algunos casos de uso interesantes que no es posible lograr solo con apuntar un elemento <video> a un conjunto de archivos de origen estáticos. Obtendrás más información para agregar contenido multimedia a una página web en una sección posterior. En primer lugar, debes conocer algunos casos de uso para la transmisión de contenido multimedia si quieres ir más allá de cargar varios archivos en el elemento <video>.
- En la transmisión adaptable, los fragmentos de contenido multimedia se codifican en varios tasas de bits, y se muestra al reproductor multimedia el fragmento de contenido multimedia de mayor calidad que se ajusta al ancho de banda disponible del cliente.
- En la transmisión en vivo, los fragmentos de contenido multimedia se codifican y se ponen a disposición en tiempo real.
- La inyección de contenido multimedia consiste en insertar otros tipos de contenido multimedia, como anuncios, en una transmisión sin que el reproductor tenga que cambiar la fuente de contenido multimedia.
Protocolos de transmisión
Los dos protocolos de transmisión más utilizados en la Web son la transmisión adaptable y dinámica a través de HTTP (DASH) y HTTP Live Streaming (HLS). Los reproductores que admiten estos protocolos recuperarán el archivo de manifiesto generado, averiguarán qué fragmentos de contenido multimedia solicitar y, luego, los combinarán en la experiencia multimedia final.
Se está usando <video> para reproducir una transmisión
Muchos navegadores no reproducirán tu transmisión de forma nativa. Si bien hay cierta compatibilidad nativa con la reproducción de HLS, los navegadores, por lo general, no admiten la reproducción de transmisiones DASH nativas. Esto significa que, a menudo, no es suficiente con simplemente apuntar el <source>
en el elemento <video> a un archivo de manifiesto.
<video controls>
<source src="manifest.mpd" type="application/dash+xml">
</video>
Lo que puede parecer un déficit es, en realidad, una fuerza disfrazada. Las transmisiones son potentes y las aplicaciones que las consumen tienen necesidades diferentes.
Los archivos de manifiesto suelen describir muchas variantes de un solo elemento multimedia. Piensa en diferentes tasas de bits, varias pistas de audio y hasta el mismo contenido multimedia codificado en diferentes formatos.
Algunas aplicaciones pueden querer mantener una mayor cantidad de video en el búfer, otras pueden querer cargar previamente los primeros segundos de video de un próximo episodio y otras quieren implementar su propia lógica para la transmisión adaptable. En este caso, querrás tener algún tipo de función integrada del navegador para generar transmisiones de contenido multimedia para la reproducción, y resulta que hay una.
Extensiones de fuente de medios
Afortunadamente, W3C definió algo llamado extensiones de fuente de medios (MSE) que permitirá que JavaScript genere nuestras transmisiones de contenido multimedia. En pocas palabras, MSE permite que los desarrolladores adjunten un objeto MediaSource a un elemento <video> y que reproduzca los datos multimedia que se envían a los búferes adjuntos a la instancia de MediaSource.
Ejemplo básico
const videoEl = document.querySelector('video');
const mediaSource = new MediaSource();
video.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener(
'sourceopen',
() => {
const mimeString = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
const buffer = mediaSource.addSourceBuffer(mimeString);
buffer.appendBuffer( /* Video data as `ArrayBuffer` object. */ )
}
);
En el ejemplo simplificado anterior, se ilustran algunos aspectos:
- En lo que respecta a
<video>, recibe datos multimedia de una URL. - La URL generada es solo un puntero a una instancia de
MediaSource. - La instancia
MediaSourcecrea una o más instanciasSourceBuffer. - Luego, solo agregamos datos de contenido multimedia binario al búfer, por ejemplo, con
fetch.
Si bien estos conceptos básicos son simples y, sin duda, es posible escribir un reproductor de video compatible con DASH y HLS desde cero, la mayoría de las personas suelen elegir una de las soluciones de código abierto maduras que ya existen, como Shaka Player, JW Player o Video.js, por nombrar algunas.
Sin embargo, creamos una AWP de demostración llamada Kino, que demuestra cómo desarrollarías tu propio sitio web de transmisión de contenido multimedia básico que proporcione reproducción de contenido multimedia sin conexión usando solo el elemento <video> simple. En nuestra planificación, hay planes para admitir frameworks y administración de derechos digitales, entre otras funciones. Así que, visita esta página de vez en cuando para ver las actualizaciones o solicita una función.
Obtén más información en el artículo AWP con transmisión sin conexión.
Formato de fragmentos multimedia
Durante mucho tiempo, DASH y HLS requerían que los fragmentos de medios estuvieran codificados en diferentes formatos. Sin embargo, en 2016, se agregó compatibilidad con archivos MP4 fragmentados (fMP4) estándar a HLS, un formato que también admite DASH.
Los fragmentos de video que usan el contenedor fMP4 y el códec H.264 son compatibles con ambos protocolos y la gran mayoría de los reproductores puede reproducirlos. Esto permite que los productores de contenido codifiquen sus videos solo una vez, lo que, a su vez, ahorre tiempo y espacio en el disco.
Para lograr una mejor calidad y reducir el tamaño de los archivos, te recomendamos que encodes varios conjuntos de fragmentos multimedia con formatos más eficientes, como VP9. Sin embargo, antes de avanzar, primero debes aprender a preparar archivos multimedia para la Web, y eso es lo que veremos a continuación.