Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.

  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

3. Multimedia Hacking > Hack 31. Replace the Background of Your HTML5 Video wit...

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.


  

You are currently reading a PREVIEW of this book.

                                                                                                                    

Get instant access to over $1 million worth of books and videos.

  

Start a Free 10-Day Trial


  
  • Safari Books Online
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint