Cómo hicimos un reproductor de video más rápido y flexible para la app de streaming de un radiodifusor

En el acelerado mundo del streaming, la experiencia del usuario es primordial. Mientras que muchas aplicaciones se centran fuertemente en la navegación y el descubrimiento de contenido, el reproductor de video en sí a menudo no recibe la atención que merece, a pesar de que es donde los usuarios pasan la mayor parte de su tiempo. Recientemente, trabajamos en un proyecto ambicioso para un radiodifusor: unificar 4 reproductores de video diferentes basados en XIB para iPhone y iPad para varios formatos de streaming — SVOD, PVOD, AVOD, TV lineal, deportes en vivo, películas y programas de TV — en una solución única basada en código usando Swift y UIKit.

Esta transición no solo hizo que el reproductor fuera más flexible y más fácil de mantener, sino que también mejoró significativamente el rendimiento en todos los dispositivos, asegurando que la aplicación del radiodifusor pudiera manejar cualquier tipo de contenido, orientación o dispositivo. Así es como abordamos este proyecto.

El Desafío: Gestionar Múltiples Tipos de Contenido

La aplicación de streaming del radiodifusor tenía que soportar una variedad de requisitos de contenido. Por ejemplo, AVOD utiliza Intersticiales HLS y requiere que se muestren botones de llamada a la acción (CTA) durante la reproducción de anuncios. El contenido deportivo a menudo incluye estadísticas en vivo o una lista de canales (para el mismo evento) en un panel lateral. Según los planes de suscripción, o PVOD, los activos se comportan de manera diferente al iniciar el reproductor. Mantener reproductores basados en XIB separados para cada tipo de contenido llevaba a código redundante y tiempos de carga más lentos.
El objetivo era construir un reproductor unificado que pudiera adaptarse dinámicamente a todos estos entornos, manejar diferentes conjuntos de controles y soportar todos los dispositivos iOS y iPadOS, manteniendo al mismo tiempo la capacidad de respuesta y facilidad de uso.

El Poder de AVPlayer: Rendimiento Nativo y Funciones Avanzadas

En el corazón del reproductor de video está AVPlayer, el motor de reproducción de video nativo de Apple. AVPlayer es el reproductor más potente disponible para iOS y iPadOS porque está profundamente integrado en el sistema. También proporciona acceso al último conjunto de funciones de streaming diseñadas específicamente para dispositivos Apple. Al construir el reproductor sobre AVPlayer, pudimos aprovechar todo el poder de los marcos multimedia de Apple, asegurando una reproducción fluida, streaming de baja latencia e integración perfecta con las funciones avanzadas de Apple como AirPlay, Picture-in-Picture, Intersticiales HLS y HDR. Las capacidades nativas de AVPlayer lo convirtieron en la base ideal para un reproductor de alto rendimiento, dándonos una sólida plataforma para construir una interfaz de usuario flexible y adaptable.

El Diseño UX/UI Distintivo del Radiodifusor

Bajo el reproductor, utilizamos AVPlayer como base para la reproducción de video, lo que es una elección común en aplicaciones de streaming. Sin embargo, todo el diseño UX/UI fue elaborado basándose en los Figmas del radiodifusor, haciendo que el reproductor se sintiera como una parte única y reconocible de su aplicación. Este diseño distintivo, que incorpora las directrices de marca y experiencia del usuario del radiodifusor, aseguró que el reproductor encajara perfectamente con el resto de la aplicación, manteniendo el sello distintivo del radiodifusor. Desde la forma en que se mostraban los controles hasta el flujo de interacción general del usuario, el reproductor debía encarnar la visión del radiodifusor y, al mismo tiempo, ofrecer un rendimiento de primer nivel.

Abordar la Interoperabilidad con DRM y Segmentos HLS Cortos

Uno de los aspectos más desafiantes de este proyecto fue asegurar la interoperabilidad sin problemas entre AVPlayer y la configuración de streaming personalizada del radiodifusor, que incluía el uso de segmentos HLS cortos (40 fotogramas) para streaming en vivo con baja latencia. Aunque AVPlayer soporta nativamente el streaming HLS, estos segmentos cortos ejercen presión adicional sobre el reproductor, que depende de contenido avanzado para reaccionar adecuadamente y manejar funciones como Picture-in-Picture (PiP), el almacenamiento en búfer y una reproducción fluida. El búfer corto significaba que el reproductor debía adaptarse continuamente para asegurar que la transmisión permaneciera fluida sin interrupciones.
Cabe destacar que la duración de los segmentos, particularmente para contenido VOD, probablemente se revisará en el futuro para alinearse mejor con los estándares de la industria y mejorar la experiencia general del usuario. Sin embargo, por ahora, el reproductor unificado gestiona estas complejidades de manera eficiente, manteniendo los altos estándares de rendimiento esperados para la diversa gama de contenido del radiodifusor.

Gestión Explícita del Main Thread con UIKit

Cuando se trabaja con UIKit, uno de los aspectos importantes es gestionar cómo y cuándo se actualiza la interfaz de usuario. Dado que UIKit maneja todos sus cambios en la interfaz en el hilo principal —la parte del sistema que interactúa directamente con lo que el usuario ve—, los desarrolladores deben ser explícitos para asegurar que cualquier cambio o actualización ocurra en el momento adecuado. Si esto no se hace cuidadosamente, puede hacer que la aplicación se ralentice o se bloquee, o que ciertas funciones, como picture-in-picture, dejen de funcionar correctamente. Esto es particularmente cierto al navegar dentro de la aplicación mientras se intenta mantener el reproductor de video funcionando sin problemas en segundo plano (PIP).

Manejo de Picture-in-Picture (PiP)

Una de las características más desafiantes es, de hecho, PiP, particularmente el PiP dentro de la aplicación que mezcla la reproducción de video y la navegación en la aplicación. Dado que UIKit requiere una cuidadosa gestión del hilo principal, garantizar que PiP funcionara sin problemas requirió muchas pruebas. Cada escenario de navegación dentro de la aplicación tuvo que considerarse para asegurarse de que PiP siguiera funcionando sin problemas a medida que los usuarios cambiaban entre diferentes áreas de la aplicación. Ya sea utilizando el PiP a nivel de sistema o el PiP personalizado del radiodifusor, el rendimiento y la experiencia del usuario eran una prioridad.

Otras Interacciones Durante la Reproducción

Más allá de la propia reproducción de video, el reproductor también debía manejar intercambios continuos de datos con servicios externos. Por ejemplo, la recopilación de estadísticas de Nice People At Work (NPAW) está integrada para monitorizar y optimizar la calidad de la experiencia. Este sistema recopila datos en tiempo real para garantizar una reproducción fluida e identificar cuellos de botella en el rendimiento. Además, el reproductor se comunicaba regularmente con la API del radiodifusor para enviar la posición del reproductor en el video. Esto permitía a los usuarios reanudar la reproducción en el mismo punto en cualquier dispositivo, asegurando una experiencia de visualización multidispositivo sin interrupciones. Estas interacciones en segundo plano debían ser gestionadas eficientemente sin afectar el rendimiento general de la reproducción.

Controles Flexibles para Varios Tipos de Contenido

Una de las características clave del reproductor es sus controles flexibles, que se adaptan dinámicamente según el tipo de contenido y el entorno del usuario. Por ejemplo:

Los controles de idioma (audio y subtítulos) son esenciales en la mayoría de los contenidos.
Un botón de "siguiente episodio" aparece solo para dramas televisivos.
La selección de canales está disponible solo para deportes en vivo.
Las estadísticas en tiempo real se muestran solo para deportes con estadísticas.

Estos controles también deben ajustarse en función de la orientación de la pantalla y el tamaño del dispositivo, asegurando que el reproductor se mantenga intuitivo y despejado. Cuando el tamaño o la orientación del reproductor cambia, los controles se ajustan automáticamente para optimizar la experiencia del usuario.

Mejora del Rendimiento: El Caso de los Reproductores Basados en Código

Otro beneficio importante de cambiar a un reproductor basado en código fue la mejora del rendimiento. Los XIB requieren que todos los elementos se preparen por adelantado, lo que significa que el sistema debe cargar todo el XIB antes de mostrar el reproductor. Al trabajar con cuatro XIB separados, este proceso de carga tenía que repetirse cuatro veces, lo que conducía a un rendimiento más lento y a problemas de gestión de la memoria.

En contraste, un enfoque basado en código permite una gestión de memoria más controlada, donde los recursos solo se cargan cuando es necesario y se liberan cuando ya no se utilizan. Este enfoque redujo drásticamente los tiempos de carga y mejoró el rendimiento, especialmente en dispositivos más antiguos con recursos limitados de CPU y memoria. El nuevo reproductor es más rápido, más eficiente y evita las trampas comunes del uso excesivo de XIB.

Pruebas Durante una Actualización Importante de iOS

El proyecto coincidió con el lanzamiento de iOS 18, la primera versión de iOS basada en Swift 6, lo que hizo que las pruebas fueran más complicadas. No siempre estaba claro si los problemas eran causados por el código, el sistema o el entorno. Se prestó especial atención a las pruebas en dispositivos antiguos, donde las mejoras de rendimiento eran más notables debido a sus recursos limitados.

Métricas y Opiniones de Usuarios (Próximamente)

En esta etapa, no hay métricas de usuarios concretas, como tasas de fallos, consumo de memoria o comentarios de reseñas y encuestas NPS, pero las pruebas iniciales muestran mejoras sustanciales en velocidad y flexibilidad. Este estudio de caso se actualizará a medida que haya más datos de usuarios disponibles.

La Flexibilidad y el Rendimiento Son Esenciales

En las aplicaciones de streaming modernas, la flexibilidad y el rendimiento son cruciales para ofrecer una experiencia de usuario de primer nivel. Al unificar los reproductores de video del radiodifusor en una sola solución basada en código, simplificamos el desarrollo, mejoramos el rendimiento y aseguramos que el reproductor pudiera adaptarse sin problemas a diferentes tipos de contenido y entornos.
Este proyecto destaca la importancia de centrarse en el propio reproductor de video, no solo en la navegación alrededor de él, ya que es, en última instancia, donde los usuarios pasan la mayor parte de su tiempo.

Article written (translated from English) by
Sylvain Corvaisier