Cuatro pasos para acelerar los contenidos de vídeo: guía para la Transcodificación de Vídeo y Streaming Adaptativo
Los vídeos mejoran la conversión en un 80% en el e-commerce y son los mejores para atraer a su audiencia. Sin embargo, pueden convertirse en su peor pesadilla si los espectadores tienen que esperar a que se reproduzca un vídeo o son interrumpidos mientras el vídeo se almacena en el búfer. La transcodificación de vídeo y el streaming adaptativo son LAS soluciones.
Los vídeos son la próxima tendencia para atraer a los usuarios. Según nuestros amigos de Techsmith (nos encanta Camtasia 💚), el 48% de las personas consideran que el vídeo es la forma de comunicación más atractiva y estos pueden mejorar la conversión en un 80%.
Todo el mundo ha experimentado el streaming de velocidad de transmisión adaptable al ver vídeos de Youtube. La calidad del vídeo renderizado por el reproductor de vídeo de Youtube se adapta a la velocidad de tu conexión a Internet para evitar los molestos buffers y ofrecer la mejor experiencia de visualización posible, independientemente de tu dispositivo o de la velocidad y estabilidad de la conexión.
Ofrecer a tus usuarios la misma experiencia de vídeo en tu sitio web, e-commerce o aplicación móvil es sencillo: sube tus vídeos a Youtube e incrusta su magnífico reproductor de vídeo. Trabajo hecho.
Pero espera, qué pasa si:
1. no estás dispuesto a subir todo tu contenido de vídeo a Youtube y/o,
2. no quieres que el logo de Youtube aparezca en tu página web
La solución más sencilla es alojar tu contenido de vídeo en tu backend y entregarlo a través de la etiqueta incorporada HTML5 video.Es la forma más rápida de conseguir que los vídeos se reproduzcan en tus aplicaciones. Sin embargo, este enfoque también tiene algunas deficiencias:
1. Un vídeo corto en Full HD (1080p) puede pesar fácilmente unos cuantos cientos de MB. Por ejemplo, mi vídeo favorito "Desde el aire" HD 44s pesa 114 MB en HD y seguramente se almacenará en el búfer en las conexiones más lentas utilizando ese enfoque,
2. el avance rápido o el rebobinado es también un dolor cuando se utiliza la etiqueta video,
3. el mismo archivo se entregará en el escritorio en el móvil, mientras que usted podría no necesitar HD para entregar una calidad aceptable en el móvil,
4. La configuración de su CDN para la entrega de vídeos conlleva un montón de retos en torno al almacenamiento en caché segmentado y las solicitudes de rango al origen.
Comprueba por ti mismo el posible resultado, a menos que tengas una gran conexión, se retrasará:
La solución
Aquí es donde el streaming con velocidad de transmisión adaptativa (ABS) y la transcodificación de vídeo se convierten en tus dos nuevos mejores amigos.
El streaming adaptativo también se conoce como streaming con velocidad de transmisión adaptativa porque el término "velocidad de transmisión" se utiliza con frecuencia para describir la velocidad de una conexión a Internet. La velocidad de transmisión de una conexión rápida a Internet es mayor que la de una conexión lenta.
La tecnología ABS permite que un reproductor de vídeo seleccione la resolución de vídeo que mejor se adapte al dispositivo y a la conexión a Internet de su visitante. DASH y Apple HLS son los dos principales formatos de Adaptive Bitrate Streaming utilizados en la web. Como indica su nombre, Adaptive significa que se requieren múltiples resoluciones de vídeo del lado del servidor para que el reproductor de vídeo elija la más "adaptada" a la conexión actual del cliente. Aquí es donde entra en juego la transcodificación adaptativa de vídeos.
La transcodificación de vídeo permite generar múltiples resoluciones de vídeo a partir de un archivo de vídeo original de alta resolución (HD o 4k). Al igual que las imágenes, que deben ser redimensionadas para ajustarse al tamaño del contenedor de imágenes en ordenadores de sobremesa y móviles para que se carguen rápidamente (véase Responsive Images: Fundamentals and Implementation Methods), los vídeos deben transcodificarse en varias resoluciones inferiores para que los reproductores de vídeo tengan múltiples opciones entre las que elegir para el streaming con velocidad de transmisión adaptativa.
¿Por qué son importantes el streaming adaptativo y la transcodificación de vídeo?
Según un estudio del profesor Ramesh K. Sitarman, de la Universidad de Massachusetts, un retraso de apenas 2 segundos hace que los usuarios abandonen tus vídeos, con un 6% de espectadores que se van después de cada segundo adicional. Y los usuarios con mayor velocidad de Internet tienen una intolerancia aún mayor a los vídeos lentos y a los retrasos.
Cuando hay tantos tamaños de pantalla, velocidades de Internet y lugares en los que los usuarios ven el mismo vídeo, la transcodificación adaptativa no es sólo algo positivo, sino imprescindible. Los usuarios lo esperan cada vez más. Las tecnologías de transcodificación adaptativa de vídeo y streaming le permiten ofrecer vídeos de alta calidad a sus usuarios con un mayor ancho de banda y velocidades de Internet rápidas, a la vez que se adaptan a los que se encuentran en otras ubicaciones con velocidades más lentas, lo que resuelve dos problemas principales: la calidad y el búfer.
Por ejemplo, como la mayoría de los vídeos se reproducen a 24 cuadros por cada segundo, la conexión a Internet tendrá que descargar como mínimo 24 cuadros por cada segundo para evitar el buffering. Con conexiones de Internet lentas, en lugar de una pantalla congelada esperando a ser almacenada en el búfer, un vídeo adaptativo puede adaptarse a las diferentes intensidades de la señal y ofrecer un archivo de vídeo más pequeño y de menor calidad.
¿La ventaja? No habrá más buffering ni interrupciones de la transmisión. Y cuando la intensidad de la señal del usuario mejore, la transmisión se adaptará dinámicamente para ofrecer un vídeo de alta calidad.
Hoy en día, que los vídeos son cada vez más populares para todas las empresas online, ya sea para atraer al público, anunciar sus productos o proporcionar información en forma de bocado, las tecnologías de transcodificación adaptativa son vitales. Las imágenes, vídeos y sitios rápidos son imprescindibles para las empresas en el espacio en línea.
Transcodificación de vídeo y streaming adaptativo con el DAM de Filerobot
En esta guía, compartiré mi experiencia adquirida durante la creación de la solución Adaptive Streaming utilizada por nuestra solución de Digital Asset Management, Filerobot.
Antes de empezar, aquí hay algunos requisitos previos que debes preparar si quieres construir tu propio servidor de medios para la transcodificación de vídeo y entregar vídeos a través del streaming adaptativo:
1. Vídeos de origen al menos con resolución HD (1080p) (códec h264 | formatos: mov, mp4, m4a, 3gp, 3g2, mj2)
2. Un servidor potente, idealmente basado en GPU, para transcodificar tus contenidos de vídeo
3. Una solución de almacenamiento escalable para alojar tus archivos de vídeo de origen y transcodificados (he descubierto que el almacenamiento de objetos como Amazon S3, Azure Blob o Google Cloud Storage funcionan bien para este caso de uso)
4. Una red de distribución de contenidos (CDN) para almacenar en caché sus fragmentos de vídeo lo más cerca posible de sus usuarios y acelerar los tiempos de carga
5. Un reproductor de vídeo que soporte protocolos de Streaming Adaptativo como DASH y HLS: He trabajado mucho con VideoJS, que es de código abierto y se puede personalizar fácilmente. Ofrece buenas páginas para probar HLS y DASH. Puedes investigar otras alternativas, también hay algunos reproductores comerciales muy buenos.
6. Algunas habilidades de codificación en software distribuido y multiprocesamiento para construir una solución performante 🚀.
HLS y DASH son los principales formatos utilizados para la transmisión de vídeo con velocidad de transmisión adaptativa. HLS es más antiguo y cuenta con un gran apoyo. Sin embargo, no parece que vaya a convertirse en un formato estándar oficial por ahora. Yo le daría una ligera ventaja a HLS sobre MPEG-DASH en términos de soporte nativo de HTML5 y reproductores.
Así es como el mismo video de arriba se transmite por Adaptive Streaming con HLS a través de VideoJS. Si tu conexión no es buena, el reproductor transmitirá un trozo de vídeo de 2 segundos de menor resolución y reevaluará la calidad de tu conexión para adaptarse en consecuencia:
Paso 1: transcodificar el vídeo en servidores con GPU
Los servidores de GPU son imprescindibles para procesar más rápido los vídeos. Por lo general, se puede hacer casi todo en la CPU, pero tener un servidor de GPU acelera la transcodificación en una media de 5 veces, según mis pruebas. Puedes encontrar algunas instancias en AWS, Azure u otros proveedores de Cloud. La situación actual con las criptomonedas y el auge del machine learning hace que los costes de la mayoría de las máquinas con GPU sean muy elevados. Si tuviera que recomendar una tarjeta de vídeo, sería la NVIDIA® Tesla® V100 Tensor Core (relación calidad/precio razonable). Comprueba la configuración de la instalación en Ubuntu LTS.
FFpmeg hace la parte de transcodificación. Es el principal framework multimedia que decodifica, codifica, transcodifica, mux, demux, stream, filtro, y lo necesitarás si quieres ocuparte del procesamiento de vídeo. Se puede instalar con un solo comando, que puede depender de tu sistema, pero si vas a convertirte en un profesional de la transcodificación de vídeo, tendrás que compilarlo con las opciones adecuadas para tu sistema operativo y procesador. Mira la guía de compilación aquí.
Un ejemplo de comando FFmpeg:
ffmpeg -i ${source} \
-pix_fmt yuv420p \
-c:v libx264 \
-b:v 600k -minrate:v 600k -maxrate:v 600k -bufsize:v 600k \
-profile:v baseline -level 3.0 \
-x264opts scenecut=0:keyint=75:min-keyint=75 \
-hls_time 3 \
-hls_playlist_type vod \
-r 25 \
-vf scale=640:-2 \
-an \
-hls_segment_filename ../${base_name}/360p/360p_%06d.ts ../${base_name}/360p/360p.m3u8
Por lo general, terminará con un comando más largo y complejo.
En el comando anterior, estoy generando diferentes fragmentos de vídeo y el archivo de lista de reproducción / manifiesto necesario para que el reproductor de vídeo emita el vídeo y venga como .m3u8 para HLS o *.mpd para DASH.
Ejecutar el comando FFmpeg de ejemplo en un servidor GPU no funcionará. Tienes que añadirle las opciones adecuadas y configurar la aceleración por hardware. Algunas de las banderas más comunes son -L/usr/local/cuda/lib64 -L/usr/local/cuda/lib32/. He encontrado información útil sobre la aceleración por hardware aquí.
Paso 2: subir la lista de reproducción / el manifiesto y los fragmentos de vídeo al almacenamiento
Una vez que la lista de reproducción/manifiesto y los fragmentos se hayan generado con FFmpeg, tienes que subirlos a la solución de almacenamiento que elijas. Es crucial encontrar una solución que proporcione un buen ancho de banda de subida. Ten en cuenta que tendrás distintas variantes del mismo vídeo, por lo que el almacenamiento debe ser lo suficientemente grande como para mantener el tamaño del vídeo x 5 (o incluso 10), que también se ve afectado por la resolución y la velocidad de transmisión.
También es importante implementar la carga en paralelo para subir los fragmentos de una determinada resolución tan pronto como se transcodifiquen.
Si los habituales clientes de Cloud storage proporcionan buenos SDKs para simplificar esta parte, a continuación he enlazado algunos de los SDKs de Python que he utilizado:
Paso 3: entregar fragmentos de vídeo a través de la CDN
Una vez que el vídeo está transcodificado y la lista de reproducción/manifiesto + todos los trozos están subidos a su almacenamiento, el siguiente paso es configurar su CDN para la transmisión de vídeo. El uso de una CDN es crucial si quieres entregar tus fragmentos de vídeo lo más rápido posible en cualquier parte del mundo, ya que la descarga directa desde el almacenamiento suele ser demasiado lenta para el streaming de vídeo. Los proveedores de CDN más populares con los que estoy familiarizado son:
La configuración de una CDN para el streaming de vídeo puede resultar complicada, pero consiste en los siguientes pasos:
1. Crear un CNAME personalizado para entregar su lista de reproducción / manifiesto y fragmentos sobre su propio subdominio (importante para el SEO)
2. Configurar un certificado SSL y desplegarlo en todos los nodos de la CDN
3. Configurar la distribución de la CDN para que se conecte a su almacenamiento como origen
4. Configurar el almacenamiento en caché para que no se almacenen en caché los archivos de lista de reproducción/manifiesto (.m3u8, .mpd) sino los trozos de vídeo (.ts, .$ext$)
5. Familiarizarse con la invalidación / flush para actualizar los fragmentos de vídeo caducados en los nodos CDN
6. Ah sí, se me olvidaba, consigue un contrato con buen precio, nada es gratis 😃
Paso 4: reproduzca sus fragmentos de vídeo con un reproductor de vídeo compatible con Adaptive Streaming
Así, ya puedes reproducir el vídeo transcodificado en tu web o aplicación móvil. Para conseguirlo, necesitas utilizar un reproductor de vídeo que soporte HLS o DASH, algunos son gratuitos y otros no:
- Video.JS 7 (Open-Source y recomendado)
- MediaElement.js
- Plyr
- DPlayer
Una vez que haya seleccionado su reproductor y lo haya incrustado en su aplicación web, sólo tiene que hacer referencia a su vídeo mediante el enlace al archivo de lista de reproducción / manifiesto a través del enlace CDN.
Nota: es importante que el host y la ruta de acceso al archivo de lista de reproducción / manifiesto sea el mismo que el de sus fragmentos de vídeo. No he podido encontrar una forma de alojar el archivo de lista de reproducción/manifiesto en una carpeta o almacenamiento separado de los trozos de vídeo.
En mi ejemplo, estoy subiendo mi lista de reproducción / manifiesto y los fragmentos de vídeo a nuestra solución Digital Asset Management Filerobot y acceder a la primera a través de:
https://token.filerobot.com/video-name/dash/video.mpd
https://token.filerobot.com/video-name/hls/video.m3u8
Para supervisar la carga de cada fragmento de vídeo, puedes utilizar la pestaña Network del inspector del navegador de tu favorito o las herramientas de desarrollo:
No dudes en reducir la velocidad de tu conexión (en la pestaña Network de Chrome) para ver cómo el reproductor de vídeo empieza a descargar fragmentos de menor resolución:
¡Ya esta!
Conclusión
En este post, he resumido a un nivel semi-alto cómo construir una solución de Adaptive Bitrate Streaming para entregar vídeos rápidos a los usuarios en línea y ofrecer la "experiencia Youtube".
Aunque los conceptos generales son sencillos, hay muchos temas en los que hay que profundizar antes de poder montar una solución robusta y escalable: FFmpeg, GPU, almacenamiento, CDN, reproductores de vídeo, ... Si quieres que escriba posts dedicados a cualquiera de los pasos o tecnologías utilizadas arriba, házmelo saber en la sección de comentarios más abajo.
No dude en intentar construir tu propio servidor de medios para el Streaming Adaptativo y comparte tus comentarios más abajo, encantado de aprender de tu experiencia. Si estás buscando una solución rápida para empezar, echa un vistazo a nuestra solución de Digital Asset Management Filerobot.
Tenemos capacidades integradas de transcodificación de vídeo y una arquitectura escalable multi-CDN para cuidar de tus vídeos por ti 📹🚀.
