Video with transparency, how to display alpha channel of webm files correctly on every device; VP9 or VP8 encoding?

Question

About how to get a transparent background with a webm video via alpha channel, here is one person that says you should encode with VP8 and not VP9.

WebM Alpha only displayed in Chrome?

And here is another person who says it's the opposite thing, like it should be VP9 and not VP8.

Transparent webm video displays solid background color on Chrome for Android 68 on android 9.0

So the question is,

Is there a way to make every device display webm video files that contain alpha channel information correctly?

HERE ARE OUR TEST RESULTS: We have produced two versions of the same webm file, one with VP8 encoding and another with VP9 encoding. We have run tests to view them on different devices. On a SONY phone (android/chrome 74) the one with VP8 encoding is displayed correctly with a transparent background while the one with VP9 encoding has its background filled with solid black instead of transparent. On a HUAWEI phone (android/chrome 74) it is the exact opposite! The one with VP9 is displayed correctly while the one with VP8 has its background filled with solid black instead of transparent. On an ASUS tablet both the VP8 and VP9 are displayed correctly. On a XIAOMI phone neither VP8 nor VP9 is displayed correctly and the pixels that were supposed to be transparent are not.

The documentation sadly does not provide a step by step guide for us to easily figure out what parameter causes which result, therefore we do not know why things are so inconsistent across devices.

AN EXAMPLE WORTH MENTIONING: On Sam Dutton's simpl.info there is...

https://simpl.info/videoalpha/

...when viewed on the desktop (chorme/windows), on the tablet (chrome/android) and on the SONY phone (chrome/android) both the dancer and the soccer player videos are displayed correctly with a transparent background via alpha channel (which is expected). But on HUAWEI and XIAOMI phones only the football/soccer player video is working as expected while, strangely, the dancer's background is filled with solid gray. It turns out that the soccer player's video does work on all android devices. Curious enough, we have actually asked Sam Dutton himself how to achieve that. In his answer he said he didn't remember the settings that was used to produce the webm file as it had been several years since then.

One thing that may be good to know (even though not directly related to the issue), is that if a WEBM file contains audio alone without any video, it is still playable in Windows and Android (with theoretically better quality than OGG), but Safari (especially mobile Safari as of 2024) WEBM audio is only partly supported which is not reliable.

---

NOTICE: This particular research has been performed during the development of the SPEAKWORLDLANGUAGES app

Macri

I've been using Adobe Media Encoder to produce my webm files. That soccer player's video file must have been encoded with some GOOD settings and a GOOD method that I wish I knew. I will try ffmpeg and post the results. – Macri

Tried using different encoders but the results were all the same: Be it Adobe Media Encoder, be it ffmpeg, be it MediaCoder. – Macri

Answer 1

As of 2024 the short answer is "Sorry, you probably cannot make WEBM alpha work on every commonly used device".

BUT we have a "somewhat promising" partial solution.
For Android and Windows, consistent transparency can be achieved across devices by using animated 'webp' files instead of 'webm' files. This could be the closest thing to a solution especially if your videos are short and has no audio.

If your video is short and does have audio, then you can convert the audio to mp3 and play it as soon as "load" or "onload" fires for <img> element that will display your webp.

But be warned: As of 2024 Safari is still not perfect with animated WEBP files. See Animated webp frames get cropped by Safari (seen on iOS 14.x 15.x 16.x)

All in all, if you want to try and see whether you can go with webps, you want to

save each frame of your video as a separate file (like uncompressed PNG with alpha) and then get the webp plug-in for Photoshop from https://github.com/webmproject/WebPShop

Finally put every frame on a layer in Photoshop and name every layer like (50 ms) or (100 ms) (including the parentheses). And "Save As" webp thanks to your new plugin. This method worked on every Android and Windows device in our tests.

---

One useful note about webps,

• The webp file size and the compression rate are not always proportional. For instance saving with 90% quality instead of 80% quality MAY ACTUALLY DECREASE THE FILE SIZE in some cases! Strange but true.

Macri

Note that switching to a WebP file means you're no longer working with video per se but rather an animated image sequence, similar to GIF, which would also be a solution for this. GIF would be less efficient but almost certainly more compatible with iOS 15 Safari, so that choice depends on your priorities. Also, the much, much easier way to do that conversion is ffmpeg -i myvideo.mp4 myvideo.webp (with -loop 0 if you want it to loop). – Avionics

Answer 2

I found out (at least in my case) that the issue with displaying transparency is related to the webm video resolution.

A webm with resolution 640x360 as they show on the Google official guide works fine on low end devices, indeed both webm videos with alpha in the official example have an nHD resolution which has many drawbacks.

If you change the nHD resolution the alpha channel stops workin on low-end devices. Maybe this could depend on the processing power of the device (could be related to how webm works internally for alpha channel or on the GPU driver as pointed out in this issue?).

Courtyard

Well, even if this is true, my tests suggest that resolution may not be the only cause of the failure. Sometimes results seem to depend only on the brand of the mobile device (like same browser, different device). Also I remember testing on a SAMSUNG phone when Chrome-for-mobile didn't display the alpha while Samsung-internet-browser did. That was the same device, just different browser. – Macri