Nel mondo dinamico dei social media, l'attenzione degli utenti si guadagna o si perde rapidamente. Le app Meta (Facebook e Instagram) sono tra le più grandi piattaforme social al mondo e servono miliardi di utenti a livello globale. Per Meta, la riproduzione fluida dei video non è solo una funzionalità, ma il fulcro dell'esperienza utente. I video nel formato breve, in particolare i feed di Facebook e i reel di Instagram, sono diventati uno dei principali fattori di coinvolgimento. Consentono l'espressione creativa e il consumo rapido di contenuti, mettendo in contatto e intrattenendo persone in tutto il mondo. 

Questo post del blog descrive il percorso di trasformazione della riproduzione video per miliardi di persone da parte di Meta, che ha reso possibile la riproduzione istantanea.

Il divario di latenza nei video nel formato breve

I video nel formato breve portano a interazioni molto rapide, poiché gli utenti scorrono rapidamente i feed. Garantire una transizione fluida tra i video in un feed in continua evoluzione introduce ostacoli unici per la riproduzione istantanea. Pertanto, abbiamo bisogno di soluzioni che vadano oltre la memorizzazione nella cache su disco tradizionale e le strategie di riproduzione reattiva standard.

Il percorso da seguire con Media3 PreloadManager

Per rispondere ai cambiamenti nelle abitudini di consumo dovuti all'aumento dei contenuti nel formato breve e alle limitazioni dell'architettura di riproduzione nel formato lungo tradizionale, Jetpack Media3 ha introdotto PreloadManager. Questo componente consente agli sviluppatori di andare oltre la memorizzazione nella cache su disco, offrendo un controllo granulare e una personalizzazione per mantenere i contenuti multimediali pronti in memoria prima che l'utente li riproduca. Leggi questa serie di blog per comprendere i dettagli tecnici della riproduzione dei contenuti multimediali con PreloadManager.

Come Meta ha ottenuto la riproduzione istantanea

Complessità esistenti

In precedenza, Meta utilizzava una combinazione di riscaldamento (per preparare i giocatori) e precaricamento (per memorizzare nella cache i contenuti sul disco) per la pubblicazione dei video. Sebbene questi metodi abbiano contribuito a migliorare l'efficienza della rete, hanno introdotto sfide significative. Il preriscaldamento richiedeva l'istanza di più istanze del player in sequenza, il che consumava una quantità significativa di memoria e limitava il precaricamento a pochi video. Questa elevata richiesta di risorse ha reso possibile l'applicazione di una soluzione più scalabile e solida per offrire la riproduzione istantanea prevista nei feed social moderni a scorrimento rapido.

Integrazione di Media3 PreloadManager

Per ottenere una riproduzione veramente istantanea, il team di Media Foundation Client di Meta ha integrato Jetpack Media3 PreloadManager in Facebook e Instagram. Hanno scelto DefaultPreloadManager per unificare i sistemi di precaricamento e riproduzione. Questa integrazione ha richiesto il refactoring dell'architettura esistente di Meta per consentire la condivisione efficiente delle risorse tra le istanze di PreloadManager ed ExoPlayer. Questo cambiamento strategico ha fornito un vantaggio architettonico fondamentale: la possibilità di parallelizzare le attività di precaricamento e gestire molti video utilizzando una singola istanza del player. In questo modo, la capacità di precaricamento è aumentata notevolmente, eliminando al contempo le complessità di memoria elevate del loro approccio precedente.

Ottimizzazione e messa a punto delle prestazioni

Il team ha quindi eseguito test e iterazioni approfonditi per ottimizzare il rendimento nell'ampio ecosistema globale di dispositivi di Meta. Il precaricamento aggressivo iniziale a volte causava problemi, tra cui una maggiore memoria utilizzata e rallentamenti delle prestazioni di scorrimento. Per risolvere il problema, hanno perfezionato l'implementazione utilizzando misurazioni accurate della memoria, tenendo conto della frammentazione dei dispositivi e adattando il sistema a pattern specifici dell'interfaccia utente.

Implementazione della messa a punto per pattern UI specifici

Meta ha applicato diverse strategie di precaricamento e ha personalizzato il comportamento in modo che corrisponda ai pattern dell'interfaccia utente specifici di ogni app:

• Feed di Facebook: l'interfaccia utente dà la priorità al video attualmente in visualizzazione. Il gestore precarica solo il video corrente per assicurarsi che inizi nel momento in cui l'utente mette in pausa lo scorrimento. Questo focus "solo corrente" riduce al minimo i footprint di dati e memoria in un ambiente in cui gli utenti potrebbero visualizzare molti post statici tra i video. Sebbene il sistema sia attualmente progettato per precaricare solo il video in visualizzazione, può essere modificato per precaricare anche i video futuri. 
• Instagram Reels: si tratta di un ambiente video puro in cui gli utenti scorrono verticalmente. Per questa UI, il team ha implementato una strategia di "precaricamento adiacente". PreloadManager mantiene in memoria i video immediatamente successivi al Reel corrente. Questo approccio bidirezionale garantisce che, indipendentemente dal fatto che un utente scorra verso l'alto o verso il basso, la transizione rimanga istantanea e fluida. Il risultato è stato un miglioramento significativo della qualità dell'esperienza, inclusi miglioramenti dell'avvio della riproduzione e del tempo al primo fotogramma per l'utente.

Scalabilità per un ecosistema globale di dispositivi diversificato

Scalare uno stack video ad alte prestazioni su miliardi di dispositivi richiede più di un semplice precaricamento aggressivo: richiede intelligenza. Meta ha dovuto affrontare problemi iniziali con l'utilizzo intensivo della memoria e il ritardo nello scorrimento, in particolare sull'hardware di fascia media e bassa. Per risolvere questo problema, hanno creato un sistema di rilevamento dello stress del dispositivo basato sull'implementazione di Media3. Le app ora monitorano i segnali di I/O e CPU in tempo reale. Se un dispositivo è sottoposto a un carico elevato, il precaricamento viene messo in pausa per dare la priorità alla reattività dell'interfaccia utente.

Questa ottimizzazione in base al dispositivo garantisce che il vantaggio della riproduzione istantanea non vada a scapito della stabilità del sistema, consentendo anche agli utenti con hardware meno recente di usufruire di un feed più fluido e senza interruzioni.

Vantaggi architetturali e integrità del codice

Oltre alle metriche rivolte agli utenti, la migrazione a Media3 PreloadManager ha offerto vantaggi architetturali a lungo termine. Sebbene il processo di integrazione e ottimizzazione abbia richiesto più iterazioni per bilanciare le prestazioni, la base di codice risultante è più gestibile. Il team ha scoperto che l'API PreloadManager si integra perfettamente con l'ecosistema Media3 esistente, consentendo una migliore condivisione delle risorse. Per Meta, l'adozione di Media3 PreloadManager è stato un investimento strategico nel futuro del consumo di video. 

Grazie all'adozione del precaricamento e all'aggiunta di gate intelligenti per i dispositivi, sono riusciti ad aumentare il tempo di visualizzazione totale sulle loro app e a migliorare il coinvolgimento complessivo della loro community globale. 

Impatto risultante su Instagram e Facebook

L'architettura proattiva ha apportato miglioramenti immediati e misurabili su entrambe le piattaforme. 

• Facebook ha registrato avvii di riproduzione più rapidi, una riduzione dei tassi di interruzione della riproduzione e una diminuzione delle sessioni problematiche (come il re-buffering, il ritardo nell'avvio, la qualità inferiore e così via), il che ha comportato un aumento del tempo di visualizzazione complessivo. 
• Instagram ha registrato avvii di riproduzione più rapidi e un aumento del tempo di visualizzazione totale. L'eliminazione della latenza di unione (l'intervallo di tempo che intercorre tra l'azione dell'utente e la visualizzazione del primo frame) ha aumentato direttamente le metriche di coinvolgimento. Le interruzioni ridotte dovute alla riduzione del buffering hanno fatto sì che gli utenti guardassero più contenuti, il che si è riflettuto nelle metriche di coinvolgimento.

Principali insegnamenti di ingegneria su larga scala

Con l'evolversi delle abitudini di consumo dei media, la domanda di esperienze istantanee continuerà a crescere. L'implementazione di una gestione proattiva della memoria e l'ottimizzazione per la scalabilità e la diversità dei dispositivi garantiscono che la tua applicazione possa soddisfare queste aspettative in modo efficiente.

• Dare la priorità al precaricamento intelligente

Concentrati sull'offerta di un'esperienza affidabile riducendo al minimo i problemi di riproduzione e i tempi di caricamento tramite il precaricamento. Anziché una semplice memorizzazione nella cache su disco, l'utilizzo del precaricamento a livello di memoria garantisce che i contenuti siano pronti nel momento in cui un utente interagisce con loro.

• Allineare l'implementazione ai pattern dell'interfaccia utente

Personalizza il comportamento di precaricamento in base all'interfaccia utente delle tue app. Ad esempio, utilizza una messa a fuoco "solo corrente" per i feed misti come Facebook per risparmiare memoria e una strategia di "precaricamento adiacente" per gli ambienti verticali come Instagram Reels.

• Sfruttare Media3 per l'integrità del codice a lungo termine

L'integrazione con le API Media3 anziché con una soluzione di memorizzazione nella cache personalizzata consente una migliore condivisione delle risorse tra il player e PreloadManager, permettendoti di gestire più video con una singola istanza del player. Il risultato è una base di codice a prova di futuro, più facile da mantenere e ottimizzare nel tempo per i team di ingegneria, che possono anche usufruire degli aggiornamenti delle funzionalità più recenti.

• Implementare ottimizzazioni in base al dispositivo

Amplia la tua copertura di mercato eseguendo test su vari dispositivi, inclusi i modelli di fascia media e bassa. Utilizza indicatori in tempo reale come CPU, memoria e I/O per adattare dinamicamente le funzionalità e l'utilizzo delle risorse.

Scopri di più

Per iniziare e scoprire di più, visita la pagina 

• Esplora la documentazione di PreloadManager di Media3.
• Leggi la serie di blog per informazioni tecniche e di implementazione avanzate.
  • Parte 1: Introduzione al precaricamento con Media3
  • Parte 2: approfondimento di PreloadManager di Media3
• Dai un'occhiata all'app di esempio per vedere il precaricamento in azione.

Ora conosci i segreti per la riproduzione istantanea. Provali subito.