Extensiones de fuente de medios HTML5: llevar la producción de video a la Web

En la última década, complementos como Flash y Silverlight han permitido un rico consumo de video en los navegadores, potenciando servicios populares como YouTube y Netflix. Sin embargo, este enfoque se ha desplazado hacia HTML5 en los últimos años.

Hace casi dos años, el W3C publicó la recomendación final de la especificación HTML5, que venía con un nuevo conjunto de elementos HTML y API, especialmente para video. Algunos de ellos apuntan a una mayor semántica en las páginas web, pero no introducen nuevas funciones. Otros amplían las posibilidades de la web y mejoran las posibilidades de los desarrolladores sin necesidad de complementos como Adobe Flash, Microsoft Silverlight o Java.

Lectura adicional en SmashingMag:

• Proporcionar una experiencia nativa con tecnologías web
• Hacer un Polyfill completo para el elemento de detalles de HTML5
• Una guía para principiantes sobre aplicaciones web progresivas
• El logotipo de HTML5: ¿Qué piensas?

Esto es especialmente importante porque, por ejemplo, Google ha anunciado la eliminación de NPAPI (una API utilizada por estos complementos), al igual que Firefox, y Microsoft aboga por la navegación sin complementos. Aunque estos proveedores todavía ofrecen un reproductor Flash, probablemente sea solo cuestión de tiempo antes de que dejen de hacerlo. Además, los navegadores en dispositivos móviles van un paso más allá porque la mayoría de ellos no admiten complementos y no tienen Flash Player.

Veamos algunos de los nuevos elementos de HTML5 y lo que mejoran para el video:

• <canvas> proporciona scripts para representar gráficos, gráficos de juegos y más. Esto a veces se conoce como la API de JavaScript de Canvas. El elemento canvas también se puede usar con WebGL para renderizar gráficos 2D y 3D, usando la GPU de la tarjeta gráfica.
• <video> permite la reproducción de video lista para usar, lo cual es realmente increíble. Esto finalmente hace que la multimedia sin complementos en la web sea una realidad. De hecho, los proveedores de navegadores parecen estar de acuerdo con un solo formato: MPEG-4/H.264, que es universalmente compatible con los navegadores modernos, con la notable excepción de Opera Mini.
• <audio> permite la reproducción inmediata de contenido de audio en una página web. Al igual que con el video, la decisión de qué formatos de contenedor y códecs admitir se deja en manos de los proveedores de navegadores.
• <track> se puede usar para pistas de texto cronometradas, como subtítulos y subtítulos en un video. Los archivos WebVTT son compatibles desde el primer momento.

La mayoría de los elementos nuevos se conocen y se usan desde hace un tiempo en el código del reproductor de video HTML5 porque están implementados en todos los navegadores modernos. La especificación es estable. Aún así, el W3C tiene mucho trabajo por hacer.

Para mí, el estándar más importante en el que está trabajando el W3C es el estándar "Media Source Extensions" (MSE), que actualmente tiene el estado de "Recomendación candidata". Esta API de JavaScript nos permite generar flujos de medios para <video> , <audio> y otros elementos, lo que permite estándares de transmisión adaptativos como MPEG-DASH en HTML5 puro y JavaScript.

Otro interesante es el estándar "Extensiones de medios cifrados", que permite la reproducción de contenido protegido en HTML5 y JavaScript. Sin embargo, este es actualmente un "borrador de trabajo" y llevará un tiempo finalizarlo.

Damos la bienvenida al nuevo estándar y esperamos con ansias el momento en que no necesitemos un reproductor Flash o un complemento, cuando los archivos multimedia se puedan ver en prácticamente cualquier dispositivo con una sola implementación.

¿Por qué MPEG-DASH?

Veamos el formato de transmisión MPEG-DASH y por qué se usa en HTML5. MPEG-DASH (DASH es la abreviatura de transmisión dinámica adaptativa a través de HTTP) es un estándar internacional independiente del proveedor ratificado por MPEG e ISO (ISO/IEC 23009-1). Las tecnologías de transmisión adaptable anteriores, como Apple HLS, Microsoft Smooth Streaming y Adobe HDS, fueron lanzadas por proveedores con soporte limitado para servidores de transmisión independientes del proveedor o para clientes de reproducción. Una situación dependiente del proveedor claramente no era deseable, por lo que los organismos de estandarización iniciaron un proceso de armonización, lo que resultó en la ratificación de MPEG-DASH en 2012.

Estos son los objetivos y beneficios de MPEG-DASH en pocas palabras:

• Reduzca los retrasos en el inicio, así como el almacenamiento en búfer y las paradas durante la reproducción de video.
• Continuar la adaptación a la situación de ancho de banda del cliente.
• Utilice la lógica de transmisión basada en el cliente para habilitar la mayor escalabilidad y flexibilidad.
• Utilice CDN, servidores proxy y cachés existentes y rentables basados ​​en HTTP.
• Omita de manera eficiente los NAT y los firewalls mediante el uso de HTTP.
• Habilite el cifrado común a través de la señalización, entrega y uso de múltiples esquemas DRM simultáneos desde el mismo archivo.
• Habilite el empalme simple y la inserción de anuncios (dirigidos).
• Admite el "modo truco" de manera eficiente.
• ¡Y mucho más!

En los últimos años, MPEG-DASH se ha integrado en nuevos esfuerzos de estandarización, como HTML5 MSE, que permite la reproducción DASH a través de etiquetas de video y audio de HTML5, así como HTML5 Encrypted Media Extensions, que permite la reproducción protegida por DRM en navegadores web. . Además, la protección DRM con MPEG-DASH está armonizada en diferentes sistemas con MPEG-CENC (para cifrado común); y la reproducción de MPEG-DASH en diferentes plataformas de Smart TV se habilita a través de la integración con Hybrid Broadcast Broadband TV (HbbTV 1.5 y HbbTV 2.0).

Además, el uso del estándar MPEG-DASH se ha simplificado gracias a los esfuerzos de la industria en torno al Foro de la industria DASH y sus recomendaciones DASH-AVC/264, así como a iniciativas prospectivas como la recomendación DASH-HEVC/265 sobre el uso de H.265/HEVC dentro de MPEG-DASH.

Hoy, MPEG-DASH se está implementando cada vez más, acelerado por servicios como Netflix y Google, que recientemente cambiaron a este nuevo estándar. Con estas dos principales fuentes de tráfico, MPEG-DASH ya representa el 50 % del tráfico total de Internet.

¿Cómo funcionan las MYPE?

Ahora veamos los detalles de las MSEs y cómo pueden ser utilizadas por los desarrolladores. Los MSE son una especificación que amplía HTMLMediaElement para permitir que JavaScript construya dinámicamente flujos de medios para etiquetas de audio y video . Esto no era posible antes porque estas etiquetas solo podían acceder a archivos completos (es decir, archivos MP4). Este enfoque también se denomina transmisión progresiva o descarga progresiva, porque los archivos multimedia se descargan y reproducen al mismo tiempo, lo que permite una pseudotransmisión.

Sin embargo, esto trae consigo una pobre capacidad de búsqueda y ninguna posibilidad de adaptar la calidad de video y audio a la situación del ancho de banda del usuario. Al construir flujos de medios en JavaScript como entradas para las etiquetas de audio y video , los desarrolladores ahora pueden adaptar dinámicamente un flujo de medios al contexto del usuario, mejorando así la experiencia de transmisión.

Como se mencionó, MPEG-DASH es el formato de transmisión elegido por las MPE. Entonces, veamos los pasos necesarios para construir un reproductor de video basado en HTML5 MSE:

1. Descargue y analice el archivo de manifiesto, llamado MPD en MPEG-DASH, que describe los detalles de la transmisión de video, como la cantidad de niveles de calidad y resoluciones de la transmisión de video, los idiomas de audio y los subtítulos, así como el nombre de los segmentos de medios y archivos en el servidor de origen basado en HTTP o CDN.
2. Calcule el ancho de banda disponible en el dispositivo cliente, elija la calidad de video adecuada para lograr una transmisión sin búfer y descargue los segmentos de medios en JavaScript.
3. Entregue los segmentos de medios descargados al búfer MSE en JavaScript.
4. Decodifique y reproduzca el video a través de la etiqueta de video , generalmente en el hardware.

Así funcionan los reproductores de streaming adaptables basados ​​en HTML5, como los que usan Netflix y YouTube. Ya existen soluciones bastante maduras, lo que facilita que los desarrolladores y proveedores de contenido cambien a transmisión de tasa de bits adaptativa en HTML5, como el proyecto de código abierto DASH-IF dash.js y el reproductor Bitdash HTML5.

La generación de contenido MPEG-DASH también es sencilla y está respaldada por herramientas de código abierto como x264 y MP4Box, así como por servicios de codificación comercial como Bitcodin.

Sin embargo, el uso de las MSEs no se limita a MPEG-DASH. Cada vez más proyectos (incluido hls.js) y reproductores (incluido Bitdash) admiten el formato HLS de Apple en HTML5 utilizando los MSE. Lo hacen transmultiplexando los segmentos de medios HLS, que son contenedores MPEG2-TS, al formato de archivo de medios base ISO requerido por HTML5 y MPEG-DASH.

Extensiones de medios cifrados para DRM

Actualmente se están produciendo cambios importantes en el mercado de DRM, causados ​​por la caída inminente de los complementos NPAPI, como Silverlight, que provocó la caída del sistema DRM líder, PlayReady, de Chrome y Firefox. Esto pone a casi todos los proveedores de contenido premium en una situación difícil porque tendrán que cambiar de tecnología y encontrar una solución preparada para el futuro.

Los editores de medios de transmisión premium no podrán confiar en PlayReady DRM de Microsoft para asegurar su contenido en Chrome y Firefox en PC y dispositivos Android. Tendrán que reevaluar su estrategia de protección de contenido y plataforma de transmisión y tendrán que encontrar una solución preparada para el futuro y luego cambiar de tecnología en breve.

Para muchos proveedores de contenido, MPEG-DASH se ha convertido en la tecnología preferida. Los proyectos DASH se han implementado a un ritmo acelerado, y las MSEs y las extensiones de medios cifrados (EMEs) con Widevine DRM parecen ser la alternativa más viable. Además, MPEG-CENC permite admitir sistemas DRM separados con solo una versión de contenido protegido, y los EME se basan en los MSE para contenido basado en MPEG-DASH.

Entonces, esta combinación de diferentes sistemas DRM, por ejemplo, Widevine Modular para Chrome y Android, Microsoft PlayReady para Internet Explorer y Edge, y Adobe's Primetime para Firefox, para una versión de un contenido brinda a los proveedores de contenido un incentivo adicional para avanzar hacia MPEG. -DASH como estándar internacional, dada su flexibilidad con streaming, DRM y CDNs.

Compatibilidad con navegadores para MSE y EME

Después de un par de años de adopción lenta por parte de los proveedores de navegadores de HTML5 y las MPE en particular, ahora vemos que la mayoría de ellos lo admiten. Esto también se aplica a las EME, aunque en este caso cada proveedor opta por un sistema DRM diferente y el ecosistema es un poco más diferenciado.

Sin embargo, para llegar al 99 % de los usuarios, debemos tener una configuración de transmisión de video que también sea compatible con los navegadores que no son compatibles con las MSEs, en particular, las versiones antiguas de los navegadores y Safari en iOS. Los navegadores antiguos se pueden servir fácilmente con un reproductor basado en Flash, que puede reproducir el mismo contenido MPEG-DASH que utilizan las MPE, como lo muestra el reproductor Bitdash. Para admitir dispositivos iOS, tenemos que usar el formato de transmisión de Apple, llamado HLS, que Apple exige para HTML5. Los estándares abiertos como los MSEs no son compatibles con Apple, aunque son compatibles con Safari en OS X.

La siguiente matriz ofrece una descripción general del estado de la compatibilidad con MSE y EME en navegadores y plataformas en la actualidad (cortesía de Bitmovin):

El futuro del vídeo HTML5

Los nuevos códecs de medios están entrando al mercado, lo que hace que la compresión de video sea aún más eficiente, lo cual es especialmente importante para formatos de mayor calidad como 4K y UHD y para la transmisión a dispositivos móviles. El códec más común es HEVC/h.265 , que podría ser el códec predeterminado dentro de un par de años (si la situación de las patentes no estropea eso). Y también utilizará los MSE integrados del navegador para la reproducción y utilizará MPEG-DASH como formato de transmisión, lo que demuestra la flexibilidad de este estándar abierto.

Los desarrolladores de reproductores de video solo tienen que realizar algunas adaptaciones simples, como cambiar el atributo del códec al crear el SourceBuffer; y, si el navegador subyacente es compatible con la decodificación HEVC (probablemente realizada por un decodificador de hardware), ¡entonces podrá ver sus transmisiones HEVC MPEG-DASH en HTML5! Hemos probado con éxito con navegadores, como Microsoft Edge, que viene con soporte HEVC. Además, Google anunció recientemente soporte en su navegador Chromium.

Sin embargo, HEVC aún no está disponible para la gran mayoría de los activos de video de Internet y solo unos pocos dispositivos son capaces de decodificarlo. Y, por supuesto, no es el único códec de la ciudad. El formato de codificación de video abierto y libre de regalías VP9 (el sucesor de VP8) tiene como objetivo tener una eficiencia de codificación aún mejor y ya es compatible con navegadores populares como Google Chrome y Microsoft Edge, y este códec también es compatible con MSE. Sin embargo, no podemos prever qué códecs encontrarán su camino en nuestra rutina diaria de transmisión. Pero ya sea VP8/9, AVC o HEVC, ¡los MSE y MPEG-DASH están listos!

Una próxima tendencia es el video de 360 ​​grados, que es bastante sencillo de usar en HTML5. Los desarrolladores podrían hacer uso de la compatibilidad con la transmisión adaptativa de las MSEs y simplemente agregar una capa de representación de JavaScript o WebGL para una experiencia de 360 ​​grados. Recientemente, di una charla sobre este tema y sobre cómo crear un servicio similar a Netflix para realidad virtual usando HTML5, JavaScript, DASH y WebGL.

Conclusión

Espero que este artículo le haya dado una buena visión general del estado y el futuro del video en la web. Las MPE y las EME son grandes pasos hacia un ecosistema de estándares abiertos para video en la web, reemplazando complementos como Flash y Silverlight. Además, HTML5 se está incorporando a las plataformas elegidas en el mundo multiplataforma actual, incluidos los entornos de escritorio, móviles y de televisión inteligente.

Junto con los estándares de transmisión como MPEG-DASH, los proveedores de contenido pueden tener una solución de video unificada en todas las plataformas y dispositivos . Pueden mejorar la experiencia del usuario a través de formatos de transmisión adaptables, que evitan el almacenamiento en búfer, reducen los tiempos de carga y brindan la mejor calidad posible para el ancho de banda y la situación del dispositivo de cada usuario.