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?
-
1+1 for probably the best personal website on Programmers.yannis– yannis2012年01月10日 12:21:28 +00:00Commented Jan 10, 2012 at 12:21
1 Answer 1
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.
-
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– Kim Burgess2012年02月07日 22:31:48 +00:00Commented Feb 7, 2012 at 22:31
Explore related questions
See similar questions with these tags.