search

transitive-bullshit / puppeteer-lottie-cli

CLI for rendering Lottie animations via Puppeteer to image, GIF, or MP4.
136 stars 20 forks source link

How to generate from lottie json with no background #16

Open jeb218 opened 4 years ago

jeb218 commented 4 years ago

Even with -b "transparent" explicitly set, there is always a black background in the generated files. I know the background isn't embedded in the json, because I have also displayed the same files in lottie-react-native, and there is no background there.

I need to generate an mp4 from the lottie json, and then use ffmpeg to overlay the generated mp4 over another mp4 - but the lottie generated video has a large black background around it that covers the other video.

Do you have any tips for getting an mp4 out that has no background?

transitive-bullshit commented 4 years ago

mp4 videos don't support transparency.

Your best bet is to output a series of transparent png images and use that "image-*.png" type pattern as your overlay input.

jeb218 commented 4 years ago

Yeah I realized the mistake in my thought process right after I posted. I tried to delete the issue but I guess they don't allow that. I was able to do the image series however

gnipbao commented 4 years ago

good issue! i have the same problem.

khaledzag commented 1 year ago

@transitive-bullshit u can use -vcodec png filter in ffmpeg command

att1sb commented 9 months ago
  1. puppeteer-lottie -i ruledme.json -o 'frame-%d.png' --width 1024
  2. ffmpeg -framerate 30 -i frame-%d.png -c:v gif -filter_complex "[0]split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse" out.gif
  3. ffmpeg -framerate 30 -i frame-%d.png -c:v libvpx-vp9 -b:v 0 -pix_fmt yuva420p out.webm

I went with webm instead of gif, easier.