Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to generate from lottie json with no background #16

Open
jeb218 opened this issue May 21, 2020 · 5 comments
Open

How to generate from lottie json with no background #16

jeb218 opened this issue May 21, 2020 · 5 comments

Comments

@jeb218
Copy link

jeb218 commented May 21, 2020

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
Copy link
Owner

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
Copy link
Author

jeb218 commented May 22, 2020

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
Copy link

gnipbao commented Sep 9, 2020

good issue! i have the same problem.

@khaledzag
Copy link

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

@att1sb
Copy link

att1sb commented Jan 30, 2024

  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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants