10 6 / 2010
Exploding HTML5 Video with JavaScript and Canvas
Sean Christmann has written another HTML5 Video and canvas demo that makes the video explode wherever it is clicked. Even when it is exploded, the pieces still continue to play the section of video that they were playing when the video was entirely together. After a few seconds, the pieces animate back together, reforming into a complete video once again. A very cool effect!
One of the things that Sean had to do to get this implementation to run smoothly, was to have a second canvas act as a buffer to the final product. It is much faster to read from a canvas than it is from a video, so this caches every frame of video so that it doesn’t need to be retrieved as often. Nice trick! He also warns that reading and writing of pixel data is very slow, as is Ogg Theora - probably because there is no hardware acceleration.
All very good information to know when writing your own crazy demos! You can check out the blog post here, and see the demo here!
