Transmisión de video HLS: qué es y cuándo usarlo

En este breve artículo me centraré en HLS, el protocolo de velocidad de bits adaptativo más extendido para la entrega de video. Responderé algunas de las preguntas principales que probablemente se hará cualquiera que esté considerando HLS por primera vez: qué es, cuándo usarlo y cómo usarlo.

Para ayudar en el camino, mostraré algunos ejemplos utilizando una herramienta de publicación de videos en línea que puede usar libremente para probar el rendimiento de HLS por su cuenta.

¿Qué es HLS y cómo funciona?

HLS es un protocolo definido por Apple para implementar un formato de transmisión de velocidad de bits adaptable que puede ser compatible con sus dispositivos y software. Con el tiempo, ha ganado un apoyo generalizado.

La característica más importante de HLS es su capacidad para adaptar la tasa de bits del video a la velocidad real de la conexión. Esto optimiza la calidad de la experiencia.

Los videos HLS están codificados en diferentes versiones con diferentes resoluciones y velocidades de bits. Esto generalmente se conoce como escalera de velocidad de bits. Cuando una conexión se ralentiza, el protocolo ajusta automáticamente la tasa de bits solicitada al ancho de banda disponible.

En comparación con los videos progresivos, HLS evita el almacenamiento en búfer y los efectos de estancamiento, además de inflar la conexión del cliente. Podemos verlo en funcionamiento en este video.

En esencia, HLS proporciona una experiencia de usuario mucho mejor cuando usamos contenido de video en nuestras aplicaciones o sitios.

Tiene soporte nativo en iOS y Android. También es compatible con Safari y, mediante el uso de JavaScript, es compatible con todos los navegadores principales (Chrome, Firefox, Edge). Si bien el uso de HLS requiere algo de esfuerzo, no es un gran problema.

Veamos cuándo debemos usarlo y cómo.

¿Cuándo deberíamos usar HLS?

Hay casos en los que los videos no son tan pesados. Por ejemplo, podría tener una secuencia de imágenes codificada como un video de 1-2 segundos, con un peso de menos de 1 MB. En este caso, un video progresivo, que se puede consumir, como una imagen, usando HTML5 simple, es sin duda la mejor opción. HLS no ofrece ninguna ventaja aquí.

Pero HLS tiene sentido cuando queremos entregar videos de alta resolución (HD o superior) con un peso superior a 3 MB. Este tipo de contenido puede acabar con nuestra UX web cuando se ve en una conexión móvil promedio.

Vale la pena señalar que este es el caso en una cantidad cada vez mayor de contenido multimedia, incluidos muchos videos cortos de menos de 20 segundos utilizados en contextos de comercio electrónico y marketing. En el ejemplo al comienzo de la publicación, tenemos un video Full HD de solo 9 segundos que pesa más de 6 MB.

¿Cómo podemos utilizar HLS en nuestros sitios?

Para utilizar HLS tenemos que abordar una serie de aspectos. Me centraré en dos puntos importantes:  

  • la necesidad de codificar el video y
  • la necesidad de incrustarlo en nuestra página.

Para obtener una visión más completa de lo que implica una canalización general de publicación de videos, puede consultar esta publicación.

Codificación HLS

Podemos codificar videos en HLS internamente o utilizando un servicio de terceros. Para construir un codificador interno, la mejor opción es usar FFMPEG, una poderosa biblioteca de código abierto para el procesamiento y codificación de video. En este caso, debemos analizar el contenido que vamos a codificar y establecer una serie de parámetros.

En HLS debemos definir una escalera de tasa de bits (la tasa de bits y las resoluciones de cada paso) y la longitud de los fragmentos. Cuando codificamos un video, terminamos con un conjunto de listas de reproducción y fragmentos. Por lo general, terminamos el primero con .m3u8 y el segundo con extensiones .ts. Podemos ver un ejemplo en la siguiente imagen.

Podemos ver una lista de reproducción maestra, una lista de reproducción adicional por interpretación y todos los fragmentos de cada interpretación. La lista de reproducción maestra especifica la escala de velocidad de bits y la ruta relativa a cada interpretación.

Apple hace una recomendación genérica que especifica la escala de velocidad de bits y una duración de fragmento de 10 segundos. Sin embargo, esto no es muy útil para muchos tipos de contenido, como los videos cortos comunes en el comercio electrónico y el marketing.

De hecho, el mejor enfoque es ajustar la escala de la tasa de bits específicamente al contenido del video. En este caso, si desea aprovechar al máximo HLS y no es un experto en codificación, es probable que un servicio de terceros que proporcione codificación por título (con HLS) sea la elección correcta.

Jugadores de HLS

Aquí encontramos dos opciones principales. Podemos ceñirnos al reproductor HTML5 o podemos usar uno implementado en JavaScript.

Reproductor HTML5

Las versiones recientes de Safari admiten HLS. En este caso, puede usar listas de reproducción HLS de la misma manera que los videos progresivos. Con otros navegadores, puede usar una pequeña biblioteca de JavaScript para implementar el protocolo HLS y nuevamente usar el reproductor HTML5 para videos progresivos.

Esto se puede hacer con HLS.js. Esta biblioteca simplemente implementa la negociación de representaciones, en función del ancho de banda disponible. El soporte es casi universal, solo condicionado al soporte de la API del elemento multimedia.

Reproductor de JavaScript

En caso de que necesitemos personalizar la experiencia de video, que es bastante común en las páginas de marketing y de historias, entonces debemos usar algo diferente al reproductor HTML5 predeterminado.

Si bien existen muchas opciones comerciales, Video.js es una buena opción. Es un reproductor de código abierto que admite un alto grado de personalización, incluidas diferentes máscaras y controles.

Un reproductor como Video.js también admite el seguimiento de eventos relacionados con el video (como acciones de reproducción o pausa) para que podamos incluirlos en nuestros propios análisis. De hecho, incluir estos datos en nuestro Google Analytics es realmente sencillo.

Resumen

He abordado las primeras preguntas sobre HLS que tendrán la mayoría de los usuarios potenciales: qué es y cuándo deberíamos usarlo.

Si bien una canalización de publicación de videos que depende de HLS se puede implementar e implementar internamente con herramientas de código abierto como FFMPEG y video.js, puede ser una buena idea utilizar un servicio de publicación de videos si no eres un experto en la tecnología. Aportan funciones avanzadas como la codificación por título, se encargan de todo el trabajo duro y nos permiten centrarnos en nuestras necesidades de personalización.