This post was meant to be a follow up to my experiments with alpha transparency in VP9. I set out to try encoding an AV1 video with yuva420p colour. Unfortunately, far too late in the process I discovered that AV1 doesn’t support alpha transparency. And that’s not a conditional situation, it’s specifically excluded from the spec.

I find that difficult to understand because

I suspect the AOM are still thinking in terms of video formats for use on televisions, where transparency isn’t an important consideration.

While looking at other modern video formats I found that HEVC does have an alpha channel, although x265 is not yet able to encode it.

Since AVIF can be animated, there is still some hope for using AV1 for moving images with transparency on the web. I tried converting a small apng to avif(s) using avif.io, but had no luck; it wouldn’t animate in Chrome, and threw up an error on Firefox. There’s ongoing work on browsers and software, hopefully it’s not too long before this is just a simple process with universal support.

My approach here is driven by curiosity, I get to do a niche experiment and a fun blog post. Still, transparency is an important feature for the web. I’m sure somewhere out there is a frontend developer crying out for a video they can play with something else in the background.

The use case for this might be an animation too complex for CSS, which you would like to have visually integrated on the web page. For example, the flag of the Welsh Socialist Republican Movement fluttering in the wind.

The republican graphic is an old design I drew in Inkscape in 2014. I made the animation in Blender after following various tutorials which cover lighting/textures/wind physics on a flat plane. A wavy flag works well as an easy introduction to 3D modelling, there are loads of tutorials out there for it.

I have another transparent video demo, but I’ll keep it parked until there’s some new innovation to show off. In the meantime I can justifiably add ‘Computer Graphics artist’ to my CV. 😉