Slow Motion in HTML5 video with CANVAS

I was reading an article about HTML5 video controls today and I noticed that they mention changing the video playbackrate attribute to control how fast a movie is playing. This is a great attribute but unfortunately, it is only currently supported by Chrome and Safari. But, messing around with CANVAS recently made me realize that this could easily be done with CANVAS. We are already grabbing each frame of the video so slowing down the drawing loop should give you slow motion.

Well, it’s a bit more involved, because we need to keep a queue of all the video frames in one array and then use another looping function that draws based on the queue of saved videoframes. To do this, I have used an extra CANVAS element to draw the video source, then I pull the pixels from that element and push them into an array. This loop runs at normal speed and generates a queue array of every frame from the movie. The second function uses that queue to now draw the frames on the page but draw them at a slower speed. Obviously this only works for video not audio but it’s an interesting approach. I also removed all the jQuery stuff and just used straight JavaScript.

Check out the demo and look at the source to see the code.