Atualmente, estou trabalhando em um projeto em que há a necessidade de compor dinamicamente várias fontes de vídeo sincronizadas em uma única tela. O protótipo inicial que montei carregou o vídeo no HTMLVideoElements e, em seguida, usou requestAnimFrame (via calço de Paul Irish ) para desenhá-los em uma única tela e manter a sincronização entre os diferentes elementos.
Embora isso seja funcional e o sistema possa manter a sincronização razoavelmente bem (tolerância de +/- 80ms), é um pouco ineficiente para dizer o mínimo. Estive pensando em otimizações e uma abordagem que parece bastante direta é combinar toda a mídia em um único "sprite de vídeo" maior e servir isso. Isso permitiria que ele fosse carregado em um único elemento de vídeo que poderia ser usado para extrair e renderizar as áreas de interesse do lado do cliente usando drawImage()e removendo a necessidade de gerenciar a sincronização entre as fontes.
Alguém já implementou algo semelhante no passado? Em caso afirmativo, qual abordagem funcionou bem para você?
fonte
Respostas:
Você já viu o popcorn.js?
O Popcorn.js é uma estrutura de mídia HTML5 escrita em JavaScript para cineastas, desenvolvedores da Web e qualquer pessoa que queira criar mídia interativa com base no tempo na Web. O Popcorn.js faz parte do projeto Popcorn da Mozilla.
http://popcornjs.org/
fonte