FFMpeg Video Generation Commands (Dr Green)Broad concept is that html5 allows multiple video sources in the video element, the browser will work down the list from top to bottom picking the first one it ‘supports’, however ‘support’ is opinionated! Most browsers support mp4 video, not all support transparent mp4 so you may need to be specific in the codec, eg for Dr Green we do; 

<video id="leftPlanetVideo" class="planet planets-1" poster="{{ planet }}" preload="none" playsinline loop muted autoplay>    <source src="/assets/sweetnirvana.mp4" type="video/mp4;codecs=hvc1" />    <source src="/assets/sweetnirvana.webm" type="video/webm" /></video>

On safari, especially mobile safari it plays the hvc1 mp4 however on others it falls back to the webm, not specifiying hvc1 means some browsers (eg Chrome on windows) play the video with a black boxed background not the transparent.

Generally .webm is as much as 50% smaller than same resolution .mp4, but not all safari browsers support it

Generating transparent mp4 from folder of transparent pngs

240x240

ffmpeg -pattern_type glob -i '*.png' -c:v hevc_videotoolbox -allow_sw 1 -alpha_quality 0.9 -tag:v hvc1 -q:v 35 -vf "scale=-1:240,premultiply=inplace=1" out.mp4

720x720

ffmpeg -pattern_type glob -i '*.png' -c:v hevc_videotoolbox -allow_sw 1 -alpha_quality 0.9 -tag:v hvc1 -q:v 35 -vf "scale=-1:720,premultiply=inplace=1" out.mp4

Generating transparent webm from folder of transparent pngs

240x240

ffmpeg -pattern_type glob -i '*.png' -c:v libvpx-vp9 -pix_fmt yuva420p -q:v 35 -vf "scale=-1:240,premultiply=inplace=1" out.webm