I'll pay anybody who can fix a glitch in my mobile solution. I was tasked with creating a solution for playing videos on mobile devices that support HTML5. The catch is that the video MUST HAVE A TRANSPARENT BACKGROUND. WP7 was easy enough, but Android and the iPhone don't allow the canvas element to catch a video element's current frame.
The solution I came up with is to split the .flv video using FFMPEG into transparent .pngs and then to stitch those images into different sprite sheets. On the phone, a canvas will play the video like an animation, going frame by frame.
The problem is that the page 'hangs' every time it switches spritesheets. I pre-load the spritesheets into an array of image objects that the canvas uses, but I'm not sure if it actually helps or not. When all I do is loop the same spritesheet over and over again, it doesn't hang, even when starting the same sheet over.
I've attached the project files. YOU WILL ONLY BE PAID AFTER FIXING THIS ISSUE.
Creating an alternative solution is also fine.