Conceptos básicos de la transmisión de contenido multimedia

Derek Herman

Jaroslav Polakovič

En este artículo, aprenderás sobre el concepto más avanzado de los medios de comunicación. y, al final, debería comprender bien los diversos de transmisión, protocolos y extensiones. Empecemos con un con una explicación detallada de qué es la transmisión.

La transmisión de contenido multimedia es una forma de enviar y reproducir contenido multimedia pieza. En lugar de cargar un solo archivo, lo que puede ser lento si no se optimiza la red, el reproductor lee un archivo de manifiesto que describe cómo se dividir en fragmentos individuales de datos. Luego, los fragmentos de medios se unen de forma dinámica. en el tiempo de ejecución, probablemente con distintas tasas de bits, lo que aprenderás más adelante.

Ten en cuenta que, para ofrecer transmisiones en tu sitio web, debe admitir el encabezado de solicitud HTTP Range. Más información sobre Accept-Ranges encabezado en El <video> y <source> Etiquetas de productos.

Casos de uso de transmisión

Producir fragmentos de medios y los manifiestos necesarios que describen la transmisión no es es exactamente sencillo, pero la transmisión desbloquea algunos casos de uso interesantes que no se pueden lograr simplemente apuntando a un elemento <video>. a un conjunto de archivos de origen estáticos. Aprenderás más sobre cómo agregar contenido multimedia a una página web en una sección posterior. Primero, debes saber pocos casos de uso para la transmisión de contenido multimedia si quieres ir más allá Carga varios archivos en el elemento <video>

• La transmisión adaptable es aquella en la que los fragmentos de medios se codifican en varias tasas de bits y el fragmento de contenido multimedia de mayor calidad que se ajuste a la del cliente el ancho de banda disponible actualmente se envía al reproductor multimedia.
• Una transmisión en vivo es aquel en el que los fragmentos de medios se codifican y se ponen a disposición en en tiempo real.
• La inyección de contenido multimedia es aquella en la que otros medios, como anuncios, se insertan. sin que el reproductor deba cambiar la fuente multimedia.

Protocolos de transmisión

Los dos protocolos de transmisión más usados en la web son los dinámicos Transmisión adaptable 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 qué fragmentos de medios solicitar y combinarlos en la parte final experiencia multimedia.

Se está usando <video> para reproducir una transmisión

Muchos navegadores no reproducen tu transmisión de forma nativa. Si bien hay algunas compatibilidad nativa con la reproducción HLS, los navegadores por lo general no admiten DASH nativo transmisión continua. Eso significa que, a menudo, no basta con solo apuntar <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 fuerza disfrazada. Las Novedades son y las aplicaciones que consumen transmisiones tienen necesidades diferentes.

Por lo general, los archivos de manifiesto describen muchas variantes de un solo contenido multimedia. Piensa de forma diferente tasas de bits, varias pistas de audio e incluso el mismo contenido multimedia codificado en diferentes formatos.

Algunas aplicaciones quieren mantener mucho video en el búfer Puede que otros quieran precargar los primeros segundos de video de un próximo y algunos quieren implementar su propia lógica para la transmisión adaptable. En este caso, conviene tener algún tipo de función integrada en el navegador para generar transmisiones de medios para la reproducción y resulta que hay una.

Extensiones de fuente de medios

Afortunadamente, el W3C definió algo llamado extensiones de fuente de medios (ECM). que permitirá que JavaScript genere nuestras transmisiones de contenido multimedia. En pocas palabras, el ECM permite a los desarrolladores que adjunten un objeto MediaSource a un elemento <video> y que reproduce los datos multimedia que se envían a los búferes adjuntos 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 MediaSource crea una o más instancias SourceBuffer.
• Luego, solo agregamos datos binarios de medios en el búfer, p.ej., usando fetch.

Si bien estos conceptos básicos son simples, y es posible escribir un Un reproductor de video DASH y HLS compatible desde cero, la mayoría de las personas suele elegir uno. de las soluciones de código abierto maduras que ya existen, como Shaka Player, JW Player o Video.js, entre otros.

Sin embargo, creamos una AWP de demostración llamada Kino, en la que se demuestra cómo desarrollarías tu propio sitio web básico de medios de transmisión que brinde Reproducción de contenido multimedia sin conexión con solo el elemento <video>. Hay planes de nuestra hoja de ruta para respaldar los marcos de trabajo y la administración de derechos digitales, entre otros atributos. 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. se agregó a HLS, un formato que también admite DASH.

Se admiten los bloques de videos que utilizan el contenedor fMP4 y el códec H.264. por ambos protocolos y que pueda jugar una gran mayoría de los jugadores. Esto permite que los productores de contenido codifiquen sus videos una sola vez, lo que, a su vez, ahorra tiempo y espacio en disco.

Para obtener una mejor calidad y tamaños de archivo más bajos, te recomendamos que elijas codificar varios conjuntos de fragmentos de contenido multimedia con formatos más eficientes, como VP9 pero, antes de avanzar, primero debes aprender a Prepara archivos multimedia para la Web, y eso es lo siguiente.