HTML5 transparent video_FFmpeg_AfterEffects(Mask)

https://developers.google.com/web/updates/2013/07/Alpha-transparency-in-Chrome-video

basically followed the step above;

in my case, I used MAYA to create 3D object and scene to map on the live stream video from IP CAM 

so I need to have a transparent background video.

GIF was another option bit since it gif is only 1 bit the edge was showing in a white line or in a step.

SVG, since it uses PNG it seems like too large to stream in real time.

1.     https://www.ffmpeg.org/ 

go to the link and install ffmpeg by command line! check the video tutorial ---

2. to support opacity, you need vp8 / libvpx encoder. if it is not installed and shows error msg that vp8 is disabled, 

reinstall ffmpeg with the codec. I installed with this command :

brew reinstall ffmpeg \
    --with-libvpx \

also turn on vp8 or vp9 on Chrome! (also by command line)

/Applications/Chromium.app/Contents/MacOS/Chromium --remote-debugging-port=9222

# for Google Chrome you'll need to escape spaces like so: 
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222




http://www.chromium.org/developers/how-tos/run-chromium-with-flags











3. in the terminal, go to the folder where your image files are located with cd command and run the code below

ffmpeg -i image%04d.png output.webm

your image should be named like this; image0001.png / image0002.png ...

4. you will get file like this :

5. then you could embed this file with video html5 tag!

       <video class="Earth" width="320" height="240" autoplay loop>

        <source src="earth.webm" type="video/webm">

      Your browser does not support the video tag.

      </video>

settings for CHROME

this feature is only available in Chrome, so we need specific settings for it.

1) enable vp8

/Applications/Chromium.app/Contents/MacOS/Chromium --remote-debugging-port=9222

# for Google Chrome you'll need to escape spaces like so: 
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

or

Ch/Applications/Goole\ Chrome.app/Contents/MacOS/Google\ Chrome --enable-vp8-alpha-playback

2) enable autoplay

chrome://flags/ .    >>>> make autoplay state to no usergesture is required

Creating Flare, or etc with transparent background in After Effects

****** have no idea but Tiff sequence doesn't work but PNG sequence work.

After Effects Mask with PNG transparency

use TrakMatt!!!!

https://forums.adobe.com/thread/914119