How to use transparency info from a video on a website
TRIAL TEXT UNDER
TRIAL TEXT OVER
1/7: Intro
CSS3 is great and all for animation, but sometimes, nothing beats a good ol' fashion video animation. It has been challenging before expressing transparencies from video on the web, because video formats/containers that support alpha channels like animation or png video do not play nicely in browsers. But there is a way to display video with transparency. Here are the steps using After Effects to create a video and the canvas element.
2/7:Create Animation
Create your animation in After Effects, making sure there is no background. Toggle the transparency to check if your comp has transparency
3/7: Export Web Friendly Videos
Export your sequence as two movies formatted for the web (h264/mp4). Choose these settings: the first movie has a video output of RGB; the other movie has a video output setting of alpha
4/7: Re-import and Stack Videos
Now bring both movies back into after affects. Make a composition twice the height of your videos. Bring the clips into the sequence, and stack them on top of each other with the rgb video on top. Export this "tall" version of the video sequence as web friendly H264, webm, and/or ogv.
5/7: Web Canvas Processing
Placing the video you made on your page is just like all other HTML5 video code, with one exception. The display is none. A canvas element in your web document will take this video information, and process the alpha channel bottom segment as information to show which pixels in the RGB section. Canvas processing can be achieved using Javascript. The goal in processing is an iteration loop that analyzes the pixels values and creates an output based on these readings. Remember, the final animation you see is not your video, it is a canvas element that has processed your video data.
6/7: Javascript Code.
Note the dimensions.
7/7: HTML and CSS
A canvas element is just like other block elements like a div. You can stack it on top of other elements using absolute positioning values and the CSS parameter Z-index. In this example, the canvas is on top of most of the elements with an index of 10. All other elements have negative Z-indeces. I added some elements above and below the canvas to illustrate how it is definitely in Z space. Click on the buttons to see each part of this demo. This lesson was adapted from this demo: http://jakearchibald.com/scratch/alphavid/ Thanks! email: greg@sciencelifeny.com for feedback!