FORMATOS DE VÍDEO HTML5: CÓDECS, PROTOCOLOS Y COMPATIBILIDAD

Foto de ALEX BERSIN
ALEX BERSIN

Desde el ordenador de sobremesa hasta el móvil, pasando por la CTV, el número de dispositivos que utilizan los espectadores para disfrutar del vídeo es muy amplio y está en constante expansión. Para los productores de contenidos, esto significa que sus contenidos en bruto deben convertirse sin problemas a diversos formatos de vídeo HTML5.

Aunque HTML5 eliminó la necesidad de plugins adicionales, la amplia gama de dispositivos sigue necesitando diferentes formatos de vídeo HTML para maximizar la capacidad de reproducción, la calidad y la seguridad. Antes de explorar los tipos específicos de vídeo HTML5 y cuáles son los mejores para diferentes escenarios, veamos más de cerca cómo se convierte el vídeo a estos formatos.

¿QUÉ ES LA CODIFICACIÓN DE VÍDEO?

En pocas palabras, la codificación de vídeo es la forma en que los datos de vídeo en bruto de las cámaras se convierten en un formato digital.

Sin embargo, este acto de comprimir y descomprimir no necesariamente hace que el contenido esté disponible en todos los dispositivos. La transcodificación, aunque a menudo se confunde con la codificación, convierte el vídeo comprimido de un formato a otro (por ejemplo, de .mov a .mp4).

En el primer paso se utiliza un códec (abreviatura de codificador/decodificador) para comprimir grandes archivos de vídeo en un tamaño más manejable tanto para su transmisión como para su almacenamiento. Cuando está listo para la reproducción, el códec descomprime el archivo y permite verlo con su calidad original o casi original. Este proceso de compresión y descompresión optimiza los archivos de vídeo para un almacenamiento eficaz y un uso mínimo del ancho de banda.

Pero, ¿qué es exactamente un códec y en qué se diferencia de un contenedor?

CÓDECS FRENTE A FORMATOS CONTENEDORES

  • Códecs. Los códecs son los algoritmos o el software utilizados para comprimir y descomprimir los datos en bruto. Los códecs de vídeo HTML5 más populares son H.264, y los de audio, AAC, MP3 y Opus.
  • Contenedores. Los contenedores son los formatos de archivo HTML5 que reúnen el vídeo y el audio codificados en un único archivo. Estos archivos también incluyen metadatos y otra información importante específica del vídeo, como subtítulos y marcadores de capítulos.

CÓDECS DE VÍDEO

Cada códec ofrece ventajas y desventajas únicas en cuanto a eficacia de compresión, calidad de vídeo y compatibilidad con distintos dispositivos y plataformas. Tendrás que familiarizarte con los tipos más comunes para saber cuál o cuáles se adaptan mejor a tus necesidades específicas.

  • H.264. También conocido como Advanced Video Coding (AVC), este códec ampliamente utilizado produce vídeo de alta calidad en archivos de pequeño tamaño, y es compatible con la mayoría de dispositivos y plataformas.
  • H.265. High Efficiency Video Coding (HEVC) es otro códec común ideal para vídeos de alta calidad, como 4K, ya que utiliza aproximadamente la mitad de bitrate que AVC. De hecho, la "alta eficiencia" de HEVC se refiere a su capacidad de compresión.
  • H.266 y códecs de código abierto. H.266, o Versatile Video Coding (VVC), es uno de los estándares de compresión más recientes y puede ofrecer hasta un 50 % más de eficiencia que HEVC. Esto lo hace ideal para el streaming en 4K, así como en 8K y más allá. Los códecs de código abierto, como VP9 de Google y AV1 de la Alliance for Open Media, también están impulsando aún más la eficiencia de la compresión. Sin embargo, al igual que VVC y otros códigos nuevos, su adopción es aún incipiente y la compatibilidad es relativamente limitada.

COMPATIBILIDAD DE CÓDECS CON NAVEGADORES Y DISPOSITIVOS

La compatibilidad de navegadores y dispositivos varía mucho según el códec de vídeo. Mientras que AVC es el más compatible con casi todos los sistemas habituales, VVC es tan nuevo que carece por completo de soporte de hardware. HEVC también es ampliamente compatible con la mayoría de los dispositivos, pero sigue teniendo problemas con los navegadores móviles. Y tanto VP9 como AV1 han avanzado mucho en el mercado, pero siguen sin ser compatibles con los navegadores y dispositivos de Apple.

SOPORTE DE NAVEGACIÓN DE ESCRITORIO

Códec Google Chrome Mozilla Firefox Microsoft Edge Safari Ópera
H.264 (AVC)
H.265 (HEVC)
(Windows 10+ con soporte de hardware)

(macOS High Sierra+)
H.266 (VVC)
VP9
AV1

 

NAVEGACIÓN MÓVIL

Códec Chrome (Android) Firefox (Android) Safari (iOS) Edge (Android / iOS) Opera (Android / iOS)
H.264 (AVC)
H.265 (HEVC)
(iOS 11+)
H.266 (VVC)
VP9
AV1

 

COMPATIBILIDAD CON DISPOSITIVOS MÓVILES

Códec Dispositivos Android Dispositivos iOS Dispositivos Samsung Google Pixel Dispositivos Huawei
H.264 (AVC)
H.265 (HEVC)
(limitado)

(iOS 11+)

(limitado)

(limitado)
H.266 (VVC)
VP9
AV1

 

COMPATIBILIDAD CON SMART TV

Códec Televisores inteligentes Samsung Smart TV LG Smart TV de Sony Televisores Roku Apple TV
H.264 (AVC)
H.265 (HEVC)
H.266 (VVC)
VP9
AV1
(modelos más nuevos)

(modelos más nuevos)

(modelos más nuevos)

 

CONSIDERACIONES SOBRE LA CODIFICACIÓN

  • Calidad (compatibilidad con 4K+). Para los productores de contenidos que deseen difundir vídeos HD y UHD (4K y superiores), la elección del códec debe ser una consideración primordial. H.265 (HEVC) y H.266 (VVC) ofrecen las mejores eficiencias de compresión para mantener una alta calidad de vídeo a tasas de bits más bajas. Los códecs de código abierto como AV1 también son excelentes para vídeos de alta calidad como 4K; sólo tienes que asegurarte de que los dispositivos y plataformas a los que te diriges los admiten.
  • Latencia. La latencia es la cantidad de tiempo que pasa antes de que un vídeo empiece a reproducirse. Por ejemplo, si empleas streaming en directo o vídeo interactivo, una latencia más baja es crucial, ya que incluso pequeños retrasos pueden afectar significativamente a la experiencia del espectador. H.264 (AVC) es bien conocido por su baja latencia y, como tal, se utiliza a menudo para aplicaciones en tiempo real. Los códecs HTML5 más recientes, como AV1, pueden ofrecer una mejor compresión, pero sus complejos procesos de codificación pueden provocar una mayor latencia.
  • Licencias. A la hora de decidir qué códec es el mejor para ti, también deberás tener en cuenta el coste de las licencias. Los códecs patentados como H.265 (HEVC) y H.266 (VVC) requieren el pago de licencias, que pueden aumentar rápidamente cuando se distribuyen a gran escala.

¿QUÉ ES EL ENVASADO DE VÍDEO?

Una vez que los códecs comprimen y descomprimen los datos de vídeo, el empaquetado es la clave para preparar los datos que se entregarán al espectador.

El empaquetado de vídeo es el proceso que combina todos los elementos necesarios para una experiencia visual de calidad. Incluye archivos de vídeo y audio codificados, manifiestos que sincronizan los archivos, metadatos y subtítulos.

A continuación le explicamos brevemente cómo funciona:

  • Codificación. En primer lugar, los datos de vídeo y audio sin procesar se codifican mediante códecs, y el tamaño de los archivos se comprime para facilitar su almacenamiento y transmisión.
  • Multiplexación (muxing). A continuación, los flujos de vídeo y audio codificados se combinan en un archivo contenedor y se organizan para una reproducción sin interrupciones. Algunos ejemplos son MP4, MKV y WebM.
  • Selección de propiedades. El productor selecciona propiedades clave para el formato de vídeo HTML5, como la tasa de bits, la frecuencia de imagen y la resolución.
  • Añadir metadatos. Metadatos como título, duración, marcadores de capítulo y subtítulos se añaden al contenedor.

Aunque comparten algunas similitudes, es importante tener en cuenta las diferencias entre el empaquetado y el transmuxado. Una diferencia clave es que el empaquetado crea nuevos contenedores, mientras que el transmuxado convierte el contenedor de un formato a otro sin cambiar el contenido original de audio, vídeo y metadatos. Por ejemplo, puedes transmutar un vídeo de un contenedor MP4 a un contenedor WebM para que sea compatible con distintos dispositivos y plataformas.

HTTP FRENTE A OTROS PROTOCOLOS

Una vez empaquetado el archivo, la elección del protocolo de entrega influirá en el rendimiento y la compatibilidad. Esto es lo que necesitas saber sobre HTTP y cómo se compara con otros protocolos de entrega.

  • HTTP. HTTP (Hypertext Transfer Protocol) es el protocolo estándar utilizado en Internet. Por eso, los formatos de streaming basados en HTTP pueden aprovechar la omnipresencia de los navegadores y la infraestructura masiva y escalable que ya existe en la web. Los formatos de vídeo HTML5 como HLS (HTTP Live Streaming) y DASH (Dynamic Adaptive Streaming over HTTP) son ideales para el streaming de vídeo por su capacidad de llegar a grandes audiencias de forma eficiente. Sin embargo, HTTP puede incurrir en una latencia más alta y puede enfrentarse a retos a la hora de mantener una calidad y fiabilidad constantes en función de las condiciones de la red del espectador.
  • WebRTC / SRT / RIST. Otros protocolos como WebRTC (Web Real-Time Communication), SRT (Secure Reliable Transport) y RIST (Reliable Internet Stream Transport) ofrecen un mayor control de la latencia, la calidad y la fiabilidad. Estos protocolos son más adecuados para aplicaciones en tiempo real como videoconferencias, producción de vídeo en directo, flujos de contribución y juegos en línea. Suelen ofrecer una latencia más baja y una calidad más uniforme, pero su ampliación para llegar a grandes audiencias puede resultar problemática o costosa. Estos factores pueden hacerlas más idóneas para audiencias pequeñas o limitadas, pero quizá menos adecuadas para el streaming de vídeo generalizado en comparación con las soluciones basadas en HTTP.

PROTOCOLOS DE TRANSMISIÓN

Los protocolos de streaming se basan en HTTP y están diseñados específicamente para ofrecer contenidos de vídeo y audio en tiempo real. Permiten una reproducción adaptativa que se ajusta a las condiciones de la red del espectador para reducir el almacenamiento en búfer y ofrecer una experiencia de visualización más fluida. Existen dos protocolos de transmisión principales, así como un formato intermedio.

  • HLS. HLS de Apple es uno de los protocolos de streaming más utilizados. Descompone el contenido de vídeo en pequeños segmentos de archivo basados en HTTP que se descargan y reproducen en tiempo real. Es un protocolo especialmente adaptable, lo que lo hace más eficaz a la hora de reducir el buffering, y es compatible con una amplia gama de dispositivos.
  • MPEG-DASH. DASH, una norma abierta desarrollada por el Grupo de Expertos en Imágenes en Movimiento (MPEG), es similar a HLS en que segmenta el contenido de vídeo. Como los segmentos se codifican con calidades diferentes, puede cambiar de nivel de calidad incluso en mitad de un vídeo para adaptarse a las condiciones de la red. Es muy flexible, ya que admite varios códecs y es ampliamente compatible con navegadores y dispositivos.
  • CMAF. Common Media Application Format (CMAF), aunque técnicamente no es un protocolo, es un formato intermedio diseñado para funcionar con HLS y DASH. Desarrollado por Apple y Microsoft, su objetivo era crear un estándar que ayudara a reducir la complejidad, el coste y el almacenamiento de la distribución de vídeo en línea. Así, en lugar de tener que crear y almacenar archivos separados para MP4, .mov y otros, CMAF utiliza un único conjunto de archivos de vídeo para el streaming HLS y DASH.

COMPATIBILIDAD DE CÓDECS CON PROTOCOLOS DE TRANSMISIÓN

  • H.264 (AVC). AVC es compatible de forma nativa con HLS, DASH y casi todos los protocolos de streaming. Gracias a su gran eficacia de compresión y a su amplia compatibilidad, los espectadores suelen disfrutar de una mejor reproducción y menos buffering.
  • H.265 (HEVC). HEVC es compatible con HLS, especialmente en dispositivos Apple con iOS 11 y versiones posteriores. DASH también es compatible con HEVC, pero requiere software o dispositivos de reproducción compatibles.
  • Códecs de código abierto. VP9 es compatible con DASH y con los principales navegadores. Sin embargo, DASH y HLS no admiten AV1 de forma nativa.

CONSIDERACIONES RELATIVAS AL ENVASADO

SEGURIDAD

Evitar la reproducción no autorizada es una consideración clave para muchas marcas de medios de comunicación. Sin embargo, la implantación de la gestión de derechos digitales (DRM ) puede resultar compleja debido a las variaciones en los formatos de los paquetes HLS/DASH. Para agilizar la implantación de DRM, el sector ha desarrollado un modelo de cifrado estándar denominado Cifrado Común (CENC).

CENC funciona con el formato CMAF, lo que permite a los productores de contenidos codificar y cifrar los medios una vez, y luego aplicar distintos proveedores de DRM para descifrarlos según sea necesario. Para ello, la etiqueta de vídeo HTML5 admite lo que se denomina Extensión de Medios Cifrados (EME). EME trabaja con CENC para estandarizar el tratamiento del contenido de vídeo cifrado. Básicamente, el vídeo se cifra con una clave CENC de 128 o 256 bits. Para descifrar y reproducir el vídeo, puede utilizar sistemas DRM como Google Widevine, Apple FairPlay y Microsoft PlayReady. Estos proveedores de DRM gestionan las claves necesarias para desbloquear el contenido cifrado y garantizar que sólo puedan acceder a él los usuarios autorizados.

Aunque CENC fue concebido para proporcionar un método universal de encriptación de medios, en la práctica, es posible que tengas que manejar los contenidos HLS y CMAF/DASH por separado debido a las diferentes implementaciones de CENC.

MONETIZACIÓN (INSERCIÓN DE ANUNCIOS)

Los modernos estándares de streaming HTTP facilitan mucho la monetización de los contenidos de vídeo mediante la inserción de anuncios. Mediante la creación de instrucciones para el reproductor de vídeo, conocidas como manifiestos, se pueden especificar segmentos de vídeo denominados chunks. Estos trozos pueden crearse a través de archivos multimedia explícitos (por ejemplo, segmento1.ts, segmento2.ts, segmento3.ts) o aprovechando solicitudes de rango de bytes (por ejemplo, mediaFile.mp4 bytes 0 a 1000). Cada uno de estos manifiestos contiene información sobre cuándo y dónde deben insertarse los anuncios. Esta funcionalidad para la monetización sigue creciendo, incluido el anuncio de Apple para 2024 de compatibilidad con el atributo Interstitial en HLS.

Además de especificar las pausas publicitarias, el manifiesto también puede aprovecharse para dirigir al espectador hacia contenidos alternativos para una mejor personalización. Mediante los "manifiestos virtuales", cada espectador o grupo de espectadores está conectado a un manifiesto personalizado en el que pueden insertarse anuncios específicos en tiempo real en función de quién los esté viendo. Este es el núcleo de nuestra solución de inserción de anuncios en el servidor (SSAI), que garantiza que cada espectador vea anuncios específicos adaptados a sus preferencias y datos demográficos.

Otro caso de manipulación manifiesta es ofrecer a los espectadores una programación alternativa. Por ejemplo, una cadena como CBS puede emitir un partido de fútbol a nivel nacional. Todos los espectadores conectados a esta señal verán el partido, a menos que se encuentren en un mercado específico, como Cleveland. En Cleveland, las instrucciones del manifiesto pueden dirigir al jugador a una señal secundaria que muestre contenidos alternativos durante el partido. Este proceso, conocido como "apagón" o programación "alternativa", garantiza el cumplimiento de los derechos de emisión regionales y ofrece una experiencia de visionado adaptada a los distintos públicos.

Hay que señalar que ni HLS ni DASH son más eficaces que el otro en la inserción de anuncios. Ambos lo permiten de la misma manera a través de manifiestos, y la mayoría de las marcas utilizarán ambos para mejorar la compatibilidad de los dispositivos. Dicho esto, los códecs subyacentes y las configuraciones de codificación del contenido y los anuncios deben coincidir para ofrecer la mejor experiencia de visualización. Si el contenido y los anuncios no coinciden, pueden producirse problemas de reproducción y calidad. El uso de una solución SSAI como la nuestra puede evitar esto, ya que condiciona los anuncios con el mismo perfil de ingesta que crea el contenido.

ACCESIBILIDAD

Otra consideración clave es la accesibilidad, incluidas las pistas en varios idiomas y los subtítulos. Afortunadamente, este proceso puede gestionarse eficazmente mediante el uso de manifiestos, lo que significa que tanto HLS como DASH son igualmente competentes. Para ello, se crean variantes localizadas en tiempo de ejecución y se especifican en el manifiesto. A continuación, el manifiesto apunta a estas variantes y a sus flujos auxiliares asociados, incluidas las variantes de representación de vídeo, las variantes de representación de audio y las variantes de representación de subtítulos.

Por ejemplo, nuestro socio, SyncWords, ingiere nuestro flujo en directo y produce pistas de audio secundarias (traducidas y dobladas en idiomas alternativos) y pistas de subtítulos/capítulos. Inicialmente, el flujo en directo original codificado contiene sólo los activos primarios, como:

  • Manifiesto maestro
  • Variante de vídeo 720p
  • Variante de vídeo 1080p
  • Variante de audio - Inglés
  • Variante de leyenda - Inglés

SyncWords toma el manifiesto maestro, extrae una de las pistas de audio y/o la pista de subtítulos y realiza la traducción en tiempo real. Este proceso produce subtítulos en varios idiomas y puede aplicar el doblaje AI para generar pistas de audio alternativas con el idioma del locutor ajustado a otros idiomas deseados. Es un claro ejemplo de cómo la tecnología sigue haciendo que tanto la producción como el consumo de contenidos sean más eficientes, inclusivos y accesibles.

HISTORIA DEL STREAMING DE VÍDEO

Conocer los formatos de vídeo HTML5 más adecuados para tu caso de uso específico requiere comprender los procesos de codificación y empaquetado de vídeo. Pero si quieres preparar tus operaciones actuales para el futuro, merece la pena repasar la historia de la tecnología de streaming. Varias innovaciones han ido y venido, por lo que vale la pena observar cuáles permanecen y continúan adaptándose.

DESCARGA PROGRESIVA Y STREAMING ANTICIPADO

En los primeros tiempos del vídeo en Internet, los reproductores multimedia como Windows Media, QuickTime y RealPlayer eran las principales plataformas de visualización. Utilizaban la tecnología de descarga progresiva, en la que los archivos se descargaban de forma lineal pero el vídeo empezaba a reproducirse antes de que se transfiriera el archivo completo. Aunque innovador para su época, este método solía provocar problemas de buffering y requería software propietario para su reproducción.

FLASH

Con Adobe Flash, la visualización en la web se simplificó con un marco común que estaba mucho más disponible en los distintos navegadores. Aunque los vídeos se almacenaban menos en el búfer y, en general, ofrecían un mejor rendimiento, dependían de un plugin de navegador pesado e ineficaz que, en algunos casos, presentaba importantes riesgos de seguridad.

HLS

La introducción del iPad de Apple cambió significativamente todo el panorama del streaming de vídeo. Alegando problemas de seguridad y de consumo de batería, Apple dejó de dar soporte a Flash. Al mismo tiempo, se lanzó HTML5, que incluía una etiqueta de vídeo HTML5 nativa que permitía a los navegadores reproducir vídeo de forma nativa. Aprovechando esta tecnología, Apple introdujo HLS y utilizó manifiestos HTTP para indicar al reproductor cómo utilizar el protocolo HTTP para solicitar segmentos de flujo. Esta innovación se basó en la infraestructura web existente para permitir la distribución escalable de vídeo a través de peticiones HTTP estándar y etiquetas de vídeo HTML5.

MPEG-DASH

Siguiendo la estela de Apple, el consorcio MPEG introdujo un estándar ajeno a Apple denominado MPEG-DASH (Dynamic Adaptive Streaming over HTTP). Al igual que HLS, MPEG-DASH utilizaba streaming basado en segmentos y protocolos HTTP. Sin embargo, al contar con el apoyo de un organismo de normalización neutral, MPEG-DASH tuvo una adopción mucho más amplia por parte de muchos otros fabricantes de dispositivos.

CMAF

CMAF se introdujo como una norma abierta que permitía preparar los contenidos como un formato multimedia base compatible con los formatos de manifiesto MPEG-DASH y HLS, lo que elimina la necesidad de crear activos multimedia independientes para cada formato, agilizando el proceso de preparación de contenidos y mejorando la eficacia.

COMPLICACIONES E INNOVACIONES

A pesar de estos avances, la transmisión de vídeo en HTML5 sigue siendo un campo complejo. Retos como la latencia ultrabaja, las reglas de apagón, los metadatos HDR y otros han requerido una serie de extensiones para MPEG-DASH, HLS y otros formatos de vídeo compatibles con HTML5. Dicho esto, estas normas siguen evolucionando rápidamente. Por ejemplo, HLS recibió varias extensiones nuevas para mejorar la entrega de anuncios y la compatibilidad con declaraciones HDR durante la Conferencia Mundial de Desarrolladores de Apple 2024 (WWDC).

Como demuestra la historia, seguirá habiendo innovaciones en la tecnología existente a medida que evolucionen los formatos de vídeo HTML5 y los protocolos de transmisión. Conocer a fondo el proceso, el software y las herramientas te ayudará a adaptarte más rápidamente a los avances y a garantizar la mejor experiencia de visualización posible.

Brightcove ayudó a un fabricante de equipos de diagnóstico a reducir el tiempo de clase y los gastos, a la vez que mejoraba el éxito ...
Brightcove ayudó al mercado automovilístico más reconocido a gestionar su enorme videoteca heredada y a monetizarla...
Para mantener la integridad de la marca, las marcas minoristas necesitan reproductores de vídeo personalizables que les permitan ajustar los colores, la fuente...

¿PREPARADO PARA EMPEZAR?

Póngase en contacto con nosotros para saber cómo podemos mejorar sus esfuerzos de marketing por vídeo y ayudarle a generar los resultados y el ROI que necesita.