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 la transmisión en realidad.
La transmisión de contenido multimedia es una forma de enviar y reproducir contenido multimedia parte por parte. En lugar de cargar un solo archivo (lo que puede ser lento si no está optimizado para la red), el reproductor lee un archivo de manifiesto en el que se describe cómo el contenido multimedia de destino se divide en fragmentos individuales de datos. Luego, los fragmentos de contenido multimedia se vuelven a unir de forma dinámica durante el tiempo de ejecución, probablemente con diferentes tasas de bits, que veremos más adelante.
Ten en cuenta que, para proporcionar una 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 Las etiquetas <video> y <source>.
Casos de uso de transmisión
Producir fragmentos de medios y los manifiestos necesarios que describen la transmisión no es exactamente sencillo, pero la transmisión desbloquea algunos casos de uso interesantes que no son posibles con solo apuntar un elemento <video> a un conjunto de archivos de origen estáticos. En una sección posterior, obtendrás más información para agregar contenido multimedia a una página web. En primer lugar, debes conocer algunos casos de uso para la transmisión de contenido multimedia si quieres ir más allá de solo cargar varios archivos en el elemento <video>.
- En la transmisión adaptable, los fragmentos de contenido multimedia se codifican en varias tasas de bits y el fragmento de contenido multimedia de mayor calidad que se ajusta al ancho de banda disponible actualmente en el cliente se devuelve al reproductor multimedia.
- En la transmisión en vivo, los fragmentos de contenido multimedia se codifican y se ponen a disposición en tiempo real.
- En la inserción de contenido multimedia, se inserta otro contenido multimedia, como anuncios, en una transmisión sin que el reproductor tenga que cambiar la fuente multimedia.
Protocolos de transmisión
Los dos protocolos de transmisión más usados en la Web son Transmisión adaptable y dinámica a través de HTTP (DASH) y Transmisión en vivo HTTP (HLS). Los reproductores que admiten estos protocolos recuperarán el archivo de manifiesto generado, determinará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 reproducen tu transmisión de forma nativa. Si bien existe compatibilidad nativa para la reproducción de HLS, por lo general, los navegadores no admiten la reproducción de transmisión de DASH nativa. Eso significa que, a menudo, no es suficiente apuntar el <source> del elemento <video> hacia 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 consumen transmisiones tienen necesidades diferentes.
Por lo general, los archivos de manifiesto describen muchas variantes de un solo contenido multimedia. Considera distintas tasas de bits, varias pistas de audio o incluso 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, el ECM permite a los desarrolladores adjuntar un objeto MediaSource a un elemento <video> y hacer que reproduzca cualquier dato multimedia que se bombee a los búferes adjuntos a la instancia 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 de contenido multimedia desde una URL. - La URL generada es solo un puntero a una instancia de
MediaSource. - La instancia
MediaSourcecrea una o más instanciasSourceBuffer. - Luego, solo anexamos datos multimedia binarios al búfer, p.ej., mediante
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 suele elegir una de las soluciones de código abierto maduras que ya existen, como Shaka Player, JW Player o Video.js, entre otras.
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. Nuestra hoja de ruta incluye planes para admitir frameworks y la administración de derechos digitales, entre otras funciones. Así que vuelve a consultar cada tanto para ver si hay 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 bloques de videos que usan el contenedor fMP4 y el códec H.264 son compatibles con ambos protocolos y la gran mayoría de los jugadores pueden reproducirlos. Esto permite a los productores de contenido codificar sus videos solo una vez, lo que, a su vez, ahorra tiempo y espacio en disco.
Para lograr una mejor calidad y tamaños de archivos más bajos, te recomendamos que codifiques varios conjuntos de fragmentos multimedia con formatos más eficientes, como VP9. Sin embargo, antes de avanzar, primero deberás aprender a preparar archivos multimedia para la Web, y este es el siguiente paso.