Modernizzare il video player di una piattaforma yoga in abbonamento: riproduzione HLS e qualità controllata dagli utenti sull’infrastruttura streaming esistente

Sommario esecutivo

Per un’attività di yoga in abbonamento, il video player non è un componente del prodotto: è il prodotto. Quando alcune nuove lezioni hanno iniziato a raggiungere gli abbonati con una risoluzione massima di 480p, sono arrivate le segnalazioni e l’aggiornamento del player, già previsto, è diventato una priorità per la crescita dell’applicazione web.

Babini Mazzari ha sostituito il player web legacy con un moderno player HLS, mantenuto l’infrastruttura streaming che già funzionava e dato agli abbonati il controllo diretto della qualità video. Il nuovo player è stato rilasciato in due milestone, ciascuna verificata su sei browser desktop e mobile e accompagnata da un piano di rollback documentato.

Cliente
un marchio internazionale di yoga online che vende lezioni e corsi in abbonamento
Piattaforma e tecnologie
piattaforma web, video player JavaScript, HLS, streaming a bitrate adattivo, picture-in-picture, test su più browser

In sintesi

PrimaDopo
Gli abbonati non potevano scegliere la qualità video e alcune lezioni arrivavano al massimo a 480pGli abbonati scelgono qualità Auto, Alta o Bassa, con adattamento automatico come impostazione predefinita
Un player legacy con controlli incoerenti tra le pagineUn solo player con gli stessi controlli ovunque sia integrato: velocità, volume, schermo intero e picture-in-picture
Ogni modifica alla riproduzione rappresentava un rischio per gli abbonati pagantiRilasci in due milestone, ciascuna con test di regressione su più browser e un piano di rollback

Contesto di business

Babini Mazzari conosceva già l’ecosistema della piattaforma e il peso operativo dell’esperienza video. I ricavi del cliente dipendono dagli abbonati che tornano a praticare: una scarsa qualità dell’immagine durante una lezione non è quindi un difetto marginale, ma compromette il valore per cui pagano.

Non intervenire non era un’opzione. Una parte del catalogo aveva subito un peggioramento perché il servizio video esterno non generava più le versioni di qualità superiore di alcuni file. Cambiare fornitore streaming avrebbe richiesto di migrare l’intera libreria video mentre gli abbonati continuavano a praticare. Serviva una soluzione sull’infrastruttura già in uso.

Sfide

  • Mantenere le funzionalità senza regressioni. Gli abbonati utilizzavano funzioni esistenti come la velocità di riproduzione e il watermark video. Perderne una sarebbe apparso come un peggioramento, non come una modernizzazione.
  • Una pipeline video fuori dal nostro controllo. La qualità dipendeva anche dal modo in cui il servizio esterno codificava ogni caricamento: un player migliore, da solo, non poteva risolvere tutto.
  • Molti browser, un’unica esperienza. Gli abbonati guardano da browser desktop e mobile con supporto HLS diverso: ogni controllo doveva comportarsi allo stesso modo ovunque.
  • Modificare una piattaforma attiva con utenti paganti. Ogni rilascio doveva essere reversibile, perché i problemi di riproduzione raggiungono immediatamente gli abbonati.

Decisioni chiave e compromessi

Modernizzare il livello critico, mantenere l’infrastruttura funzionante. Abbiamo sostituito il player lasciando in uso il servizio streaming. Questo ha mantenuto il perimetro sotto controllo ed evitato una migrazione costosa. Il compromesso è stato accettare i vincoli del servizio e trovare soluzioni compatibili.

Dare agli abbonati il controllo, oltre a una migliore impostazione predefinita. Lo streaming adattivo sceglie automaticamente la qualità, ma serviva una scelta manuale quando la selezione automatica non corrispondeva alle aspettative. Un semplice selettore Auto, Alta e Bassa ha risposto a una segnalazione concreta con un costo contenuto.

Correggere la causa, non solo il sintomo. Parte del problema dipendeva dalla preparazione dei video prima del caricamento. Abbiamo documentato le impostazioni di codifica e i vincoli che determinano quali versioni vengono generate, invece di compensarli nel player.

Approccio

Analisi e scelta del player

Abbiamo confrontato player compatibili con HLS in base all’estensibilità e all’integrazione con il servizio video esistente. Il risultato è stato un documento tecnico con il player scelto, le motivazioni, l’approccio di integrazione e i limiti noti, approvato come consegna della prima milestone.

Implementazione e mantenimento delle funzionalità

Il nuovo player è stato realizzato prima in staging. Ha riprodotto le funzionalità esistenti, compresi il watermark e un insieme semplificato di velocità di riproduzione, aggiungendo controlli standard per volume, schermo intero e picture-in-picture.

Controllo della qualità e streaming adattivo

Il selettore della qualità è stato collegato alle varianti HLS prodotte dal servizio, con la stessa interfaccia su ogni pagina che integra il player. È stata valutata la trasmissione verso smart TV e ne sono stati documentati i limiti dove il browser non la supportava.

Qualità dei video sorgente

In parallelo abbiamo lavorato con il team del cliente sui file stessi. L’output del servizio streaming dipendeva dal bitrate e dal profilo di codifica di ogni caricamento: abbiamo quindi documentato le impostazioni e i vincoli che influivano sulla generazione delle varianti HLS di qualità superiore. Il cliente ha così ottenuto un riferimento ripetibile per preparare le lezioni future, invece di trattare ogni video di bassa qualità come un problema distinto del player.

Rilascio e gestione del rischio

Ogni milestone ha superato test di regressione su video e pagine rappresentativi, verifiche delle prestazioni e controlli con tastiera e screen reader dove supportati. Entrambe sono state rilasciate con un piano di rollback documentato.

Risultati

Un player moderno sull’infrastruttura esistente

La piattaforma è passata a un player HLS senza cambiare fornitore streaming, mantenendo la libreria video esistente.

Gli abbonati controllano la qualità dell’immagine

Tre opzioni di qualità, con streaming adattivo come impostazione predefinita, hanno restituito agli abbonati il controllo dell’esperienza di visione.

Un’esperienza coerente

Gli stessi controlli funzionano ora su sei browser desktop e mobile e su ogni pagina che integra una lezione.

Un percorso chiaro per la pipeline video

La documentazione dell’integrazione, dei suoi limiti e delle impostazioni di codifica che determinano la qualità dei caricamenti offre al team del cliente un metodo ripetibile per mantenere alta la qualità mentre il catalogo cresce.

A chi si rivolge

Questo approccio è adatto ad attività in abbonamento e di e-learning in cui l’esperienza video costituisce il prodotto e che devono modernizzare rapidamente la riproduzione senza migrare l’infrastruttura streaming né mettere a rischio gli abbonati paganti.

Domande frequenti

Si può sostituire un video player senza cambiare fornitore streaming?

Sì. Se il fornitore distribuisce HLS standard, il player può essere sostituito separatamente, mantenendo la libreria e il contratto esistenti. Il lavoro consiste nel collegare il nuovo player alle varianti del fornitore e verificarlo su più browser.

Gli abbonati dovrebbero poter scegliere la qualità video anche con lo streaming adattivo?

Di solito sì. Lo streaming adattivo è la corretta impostazione predefinita, ma una semplice scelta manuale risolve le segnalazioni quando la selezione automatica non corrisponde alle aspettative.

Come si riduce il rischio di cambiare player su una piattaforma in abbonamento attiva?

Rilasciando per milestone, eseguendo test di regressione su video e browser rappresentativi e mantenendo un piano di rollback documentato per ogni rilascio.

Perché alcuni video vengono riprodotti a bassa risoluzione anche con un player moderno?

Il player può mostrare solo le versioni generate dal servizio video. I problemi di codifica a monte richiedono una correzione alla fonte, per esempio impostazioni coerenti per i caricamenti.

Servizi correlati

  • Application modernization: sostituzione del player legacy mantenendo l’infrastruttura funzionante.
  • Sviluppo web: realizzazione, verifica e rilascio del nuovo player sulla piattaforma web.

Prossimi passi

Se il video è al centro del tuo prodotto in abbonamento e la riproduzione è diventata un rischio, parla con Babini Mazzari di un piano di modernizzazione mirato che protegga gli abbonati e l’infrastruttura esistente.

Parliamo del tuo progetto

Richiedi una consulenza per valutare il prossimo passo insieme a Babini Mazzari.

Richiedi una consulenza