La libreria del lettore multimediale è open source

Abbiamo reso open source il nostro toolkit per creare lettori video e audio personalizzati. Il toolkit fornisce rerender minimi di React, componenti preconfezionati e un'API flessibile per creare i tuoi componenti personalizzati.

Il mondo sta diventando video e i browser sono un solido razzo per intraprendere questo viaggio. Veloce, semplice da usare e con un ampio supporto di codec. Aggiungere video alle app React non è mai stato così facile .

Eppure, questo non significa che sia già tutto perfetto. Sebbene librerie come ReactPlayer colmino il divario dai browser a React, ci sono ancora sfide aperte:

• Eventi economici: ottieni un aggiornamento ogni 50 msec dal video player per aggiornare la tua app, senza comprometterne le prestazioni
• Personalizza l'interfaccia utente: è ancora sorprendentemente complicato costruire un giocatore con il tuo aspetto e le tue sensazioni

Abilitiamo eventi economici rispecchiando lo stato del video in JavaScript . È fondamentalmente il concetto di Virtual DOM di React applicato al lettore video del browser: l'app interagisce con JavaScript, che è molto più economico che scendere al livello DOM. Ciò consente tra l'altro di registrare gli ascoltatori ai cambiamenti ad alta frequenza nel lettore, ad esempio essere avvisati quando il video raggiunge determinati punti temporali.

Per personalizzare l'interfaccia utente, ci siamo ispirati al modello a cipolla: puoi utilizzare il lettore preconfezionato che viene fornito con tutti i tipi di chicche come picture-in-picture, schermo intero e segmenti evidenziati. Se hai bisogno di una maggiore personalizzazione dell'interfaccia utente, puoi semplicemente staccare questo strato e comporre il tuo lettore unendo insieme i componenti già pronti . Hai bisogno di ancora più personalizzazione? Basta scrivere i propri componenti che possono essere facilmente collegati al lettore.

➡️ Sembra interessante? Vai su Github, provaci e facci sapere cosa ne pensi:https://github.com/Collaborne/media-player