En este artículo, aprenderás sobre el concepto más avanzado de la transmisión de contenido multimedia y, al final, deberías comprender bien los diversos casos de uso, protocolos y extensiones de transmisión. Comencemos con una explicación de lo que son las transmisiones.
La transmisión de contenido multimedia es una forma de entregar y reproducir contenido multimedia parte por parte. 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 individuales de datos. Los fragmentos multimedia se vuelven a unir de forma dinámica durante el tiempo de ejecución, probablemente con distintas tasas de bits, que veremos más adelante.
Recuerda que, para proporcionar 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 multimedia y los manifiestos necesarios que describen la transmisión no es un proceso sencillo, pero la transmisión desbloquea algunos casos de uso interesantes que no se pueden lograr solo con apuntar un elemento <video> a un conjunto de archivos de origen estático. 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 solo cargar varios archivos en el elemento <video>.
- En la transmisión adaptable, los fragmentos multimedia se codifican en varias tasas de bits, y el fragmento de contenido multimedia de mayor calidad que se adapta al ancho de banda disponible actualmente del cliente se devuelve al reproductor multimedia.
- En la transmisión en vivo, los fragmentos multimedia se codifican y se ponen a disposición en tiempo real.
- La inyección de contenido multimedia ocurre cuando otro contenido multimedia (como los anuncios) se inserta en una transmisión sin que el reproductor tenga que cambiar la fuente del contenido multimedia.
Protocolos de transmisión
Los dos protocolos de transmisión más usados en la Web son la transmisión dinámica adaptable a través de HTTP (DASH) y la transmisión en vivo HTTP (HLS). Los reproductores compatibles con 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.
Cómo usar <video> para reproducir una transmisión
Muchos navegadores no reproducirán la transmisión de forma nativa. Si bien existe cierta compatibilidad nativa con la reproducción HLS, los navegadores, por lo general, no admiten la reproducción de transmisión de DASH nativa. Eso significa que, a menudo, no basta con apuntar el <source> del 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 fortaleza disfrazada. Las transmisiones son potentes, y las aplicaciones que las consumen tienen diferentes necesidades.
Los archivos de manifiesto suelen describir muchas variantes de un solo contenido multimedia. Piensa en diferentes tasas de bits, varias pistas de audio o incluso el mismo contenido multimedia codificado en diferentes formatos.
Es posible que algunas aplicaciones deseen mantener una mayor cantidad de video en el búfer, mientras que otras deseen realizar una carga previa de los primeros segundos de video de un próximo episodio y otras deseen implementar su propia lógica para la transmisión adaptable. Aquí es donde te convendría 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 fuentes de medios
Afortunadamente, el 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 a los desarrolladores conectar un objeto MediaSource a un elemento <video> y hacer que reproduzca los datos multimedia que se envíen a los búferes conectados 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. */ )
}
);
El ejemplo simplificado anterior ilustra algunos aspectos:
- En lo que respecta a
<video>, es porque 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 multimedia binarios en el 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 suelen elegir una de las soluciones de código abierto consolidadas que ya existen, como Shaka Player, JW Player o Video.js, por nombrar algunas.
Sin embargo, creamos una AWP de medios de demostración llamada Kino, que demuestra cómo desarrollarías tu propio sitio web básico de transmisión de contenido multimedia, que proporciona reproducción de contenido multimedia sin conexión solo con el elemento <video> simple. Nuestra hoja de ruta tiene planes para admitir frameworks y la administración de derechos digitales, entre otras funciones. Por lo tanto, revisa periódicamente 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 bloques de medios
Durante mucho tiempo, DASH y HLS requerían que los fragmentos multimedia se codificaran en diferentes formatos. Sin embargo, en 2016, se agregó compatibilidad con archivos estándar MP4 fragmentados (fMP4) 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 los reproduce la gran mayoría de los reproductores. Esto permite que los productores de contenido codifiquen sus videos solo una vez, lo que, a su vez, ahorra tiempo y espacio en disco.
Para lograr una mejor calidad y reducir los tamaños de los archivos, te recomendamos que codifiques varios conjuntos de fragmentos multimedia con formatos más eficientes, como VP9. Sin embargo, antes de continuar, primero deberás aprender a preparar archivos multimedia para la Web. A continuación, encontrarás información sobre cómo hacerlo.