Attualmente sto lavorando a un progetto in cui è necessario creare dinamicamente più sorgenti video sincronizzate su una singola tela. Il prototipo iniziale che ho messo insieme ha caricato il video in HTMLVideoElements e poi ha utilizzato requestAnimFrame (tramite lo shim di Paul Irish ) per disegnarli su una singola tela e mantenere la sincronizzazione tra i diversi elementi.
Anche se questo è funzionale e il sistema può mantenere la sincronizzazione abbastanza bene (tolleranza di +/- 80ms) è in qualche modo inefficiente per non dire altro. Ho pensato all'ottimizzazione e un approccio che sembra abbastanza semplice è quello di riunire tutti i media in un unico "video sprite" più grande e servire a questo. Ciò consentirebbe di caricarlo in un singolo elemento video che potrebbe quindi essere utilizzato per estrarre e rendere le aree di interesse lato client utilizzando drawImage() e rimuovere la necessità di gestire la sincronizzazione tra fonti.
Qualcun altro ha implementato qualcosa di simile in passato? Se sì, quale approccio ha funzionato bene per te?