Is it possible to make a video with transparency? I am remaking the DynamicalSystems.jl logo and I would be happy to make a video itself transparent so that it can obtain whatever background color the website has.
The question is, is it even possible?
If anyone knows of a solution I would be glad to hear it! Preferably using Makie!
You can render to a gif with transparency using Makie, would that work?
Video with transparency is technically possible but support for playing it back varies in my experience. I haven’t tried with Makie, but if you can store images with transparency you can also concat them into a video with ffmpeg. So this workaround for GLMakie applies for example
https://docs.makie.org/stable/how-to/save-figure-with-transparency/
I would google around a bit first what’s the best compatibility options for using transparent videos on websites, there will be some ffmpeg incantations around on stackoverflow etc. At the time I wanted one to use in powerpoint and that took a while to get the codec set up exactly right…
Found this just now for example How to use transparent videos on the web in 2023 - Rotato | Rotato with the interesting tidbit:
We’ve had transparent video formats for years. So why isn’t this simple? Long legal story short: There are two significant browsers from two big companies. Google and Chrome think open source is fantastic, so they made their own open-source format. Apple and Safari want to stick to the MPEG standard, so they support HEVC (H265).
The results?
- Safari supports HEVC with alpha, and Chrome does not.
- Chrome supports VP9 with alpha, and Safari does not.
Now what? You guessed it: We’ll have to provide both formats and let each browser choose.
thanks both, I will do some research. GIF is always possible, but my main problem is that it creates massive file sizes for the amount of animation I would like to bake in. I’ll see if I can reduce the framerate or something else to make it more approachable.
If you only have a few themes, it’s possible to use CSS to select a version of the GIF/video to display - then you could have one version per theme.