Chrome Canary now supports video alpha transparency in WebM.
In other words, Chrome takes the alpha channel into account when playing 'green screen' videos encoded to WebM with an alpha channel. This means you can play videos with transparent backgrounds: over web pages, images or even other videos.
There's a demo at simpl.info/videoalpha. This only works in Chrome Canary at this point, and you'll need to enable VP8 alpha transparency from the chrome://flags page. Somewhat surreal, and a bit rough around the edges (literally) but you get the idea!
Here's a screencast:
The method we describe uses the open source tools Blender and ffmpeg:
There are also proprietary tools to do the same job, such as Adobe After Effects, which you may find simpler.
First of all, you need to film your subject in a way that everything in the background can be 'removed' (made transparent) by subsequent processing.
The easiest way to do this is to film in front of a single colour background, such as a screen or curtain. Green or blue are the colors most often used, mostly because of their difference from skin tones.
There are several guides online to filming green screen video (also known as chroma key) and lots of places to buy green and blue screen backdrops. Alternatively, you can paint a background with chroma key paint.
The Great Gatsby VFX reel shows just how much can be accomplished with green screen.
Some tips for filming:
The following steps describe one way to create a raw alpha video from green screen videos:
ffmpeg -i image%04d.png -pix_fmt yuva420p video.raw
ffmpeg -i image%04d.png output.webm
If you want to add audio, you can use ffmpeg to mux that in with a command like this:
ffmpeg -i image%04d.png -i audio.wav output.webm
Raw alpha videos can be encoded to WebM in two ways.
With ffmpeg: we added support to ffmpeg to encode WebM alpha videos.
Use ffmpeg with an input video including alpha data, set the output format to WebM, and encoding will automatically be done in the correct format as per the spec. (Note: you'll currently need to make sure to get the latest version of ffmpeg from the git tree for this to work.)
ffmpeg -i myAlphaVideo.webm output.webm
git clone http://git.chromium.org/webm/libvpx.git
webm-tools is a set of simple open source tools related to WebM, maintained by the WebM Project authors, including a tool for creating WebM videos with alpha transparency.
Run the binary with
--help to see list of options supported by alpha_encoder.
To play the encoded WebM file in Chrome, simply set the file as the source of a
As of now, VP8 alpha playback is behind a flag, so you have to either enable it in about:flags or set the command line flag
--enable-vp8-alpha-playback when you start Chrome. When the flag is enabled,
alpha playback also works with
We talked to Google engineer Vignesh Venkatasubramanian about his work on the project. He summarised the key challenges involved:
We can think of lots of interesting use cases for video alpha transparency: games, interactive videos, collaborative story telling (add your own video to a background video/image), videos with alternative characters or plots, web apps that use overlay video components...
Happy film making! Let us know if you build something amazing with alpha transparency.