Hack 31. Replace the Background of Your HTML5 Video with the <canvas> Tag

With HTML5 video, a <canvas> tag, and a little bit of JavaScript you can make Hollywood-style (I’m using the term loosely) effects on your video in real time.

Being able to play video directly on your web application is pretty cool, but being able to manipulate that same video in real time is awesome. We’ve all see the green screen effects from “making of” videos in which an actor is filmed in front of a green screen, and then a new background is composited into the shot to make it look like the actor is kung-fu fighting at the top of the Golden Gate Bridge, or something cool like that. We’re going to accomplish the same thing with a <video> tag, two <canvas> tags, and a few lines of JavaScript.