Awesome HTML5 Video Trick

Create a free chroma key effect using HTML5 and canvas.

LINKS:
Live example - http://www.tinkernut.com/demos/273_chroma/video_chroma.html
Project Files - www.tinkernut.com/demos/273_chroma/html5_chroma.zip
HTML5 video tutorial - http://www.youtube.com/watch?v=lZVFUQOCQWI
Decimal color values - http://html-color-codes.com/rgb.html

OTHER COOL EFFECTS:
Black & White, Embossed, and more - http://html5doctor.com/video-canvas-magic
Blowing up video: http://craftymind.com/factory/html5video/CanvasVideo.html
Rotating video: http://craftymind.com/factory/html5video/CanvasVideo.html
Video Background: http://html5doctor.com/demos/video-canvas-magic/demo1.html

Category:

Howto & Style

Tags:

• tips
• tricks
• tutorial
• tinkernut
• html5
• html
• coding
• programming
• website
• web
• video
• streaming
• player
• multimedia
• green
• screen
• free
• chroma
• key

[olay1996]

Can u make tutorial on how to make your videos.

[reboh79]

How the hell do you edit this stuff so well?

[rufusnolan]

@reboh79 he is a pro

[Featureman]

@JEFFy228563 I recommend w3schools which is dot com. It is free.

[JEFFy228563]

hello i need help im new to html coding and i want to make a website? 

[D190N]

thumbs if your are watching this in 2012

[MrJohnnyBras]

dude, you're awesome! Thanks, help me a lot. But I'm working with Ipad, Iphone and Android plataforms. Nothing really worked for me. But when I'm using safary and opera on my desktop all things go just great. THANKS!

[Mannaio7]

very clear, simple. Great tutorial, i will include in my next blog post.

[SuperFreedomRock]

Sooo much work just to remove a background from a video - programs like Edge are going to have to take the place of Flash to make Canvas more useful and accessible

[3y3n5tyn]

thanks man! i like your videos!

[TechTubeCentral]

@freshicedcoke use the html tag title and add it to the header

[freshicedcoke]

how do you change the name of the website?