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.
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
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
