Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I'm currently working on a project where there is a requirement to dynamically composite multiple synchronised video sources onto a single canvas. The initial prototype I put together loaded the video into HTMLVideoElements and then used requestAnimFrame (via Paul Irish's shim) to draw these onto a single canvas and maintain sync between the different elements.

Although this is functional and the system can hold sync fairly well (+/- 80ms tolerance) it is somewhat inefficient to say the least. I've been thinking about optimisations and one approach that seems pretty straight forward is to combine all the media into a single larger 'video sprite' and serve this. This would allow it to be load into a single video element which could then be used extract and render the areas of interest client side using drawImage() and remove the need to manage sync between sources.

Has anyone else implemented something similar in the past? If so what approach worked well for you?

share|improve this question
+1 for probably the best personal website on Programmers. – Yannis Jan 10 '12 at 12:21

Have you checked out popcorn.js?

Popcorn.js is an HTML5 media framework written in JavaScript for filmmakers, web developers, and anyone who wants to create time-based interactive media on the web. Popcorn.js is part of Mozilla's Popcorn project.

share|improve this answer
Yep, all over popcorn. Unfortunately however it addresses a different set of issues. The challenge faced in this project was to do with maintaining sync between a set of dynamically selectable media resources. – Kim Burgess Feb 7 '12 at 22:31

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.