Actualmente estoy trabajando en un proyecto donde existe el requisito de componer dinámicamente múltiples fuentes de video sincronizadas en un solo lienzo. El prototipo inicial que armé cargó el video en HTMLVideoElements y luego usé requestAnimFrame (a través de la cuña de Paul Irish ) para dibujarlos en un solo lienzo y mantener la sincronización entre los diferentes elementos.
Aunque esto es funcional y el sistema puede mantener la sincronización bastante bien (tolerancia de +/- 80ms) es algo ineficiente por decir lo menos. He estado pensando en optimizaciones y un enfoque que parece bastante directo es combinar todos los medios en un solo 'video sprite' más grande y servir esto. Esto permitiría cargarlo en un único elemento de video que luego podría usarse para extraer y renderizar las áreas de interés del lado del cliente drawImage()y eliminar la necesidad de administrar la sincronización entre las fuentes.
¿Alguien más ha implementado algo similar en el pasado? Si es así, ¿qué enfoque funcionó bien para usted?
fuente
Respuestas:
¿Has echado un vistazo a popcorn.js?
Popcorn.js es un marco multimedia HTML5 escrito en JavaScript para cineastas, desarrolladores web y cualquier persona que quiera crear medios interactivos basados en el tiempo en la web. Popcorn.js es parte del proyecto Popcorn de Mozilla.
http://popcornjs.org/
fuente