Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

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

EDIT1: HERE ARE SOME TEST RESULTS! I have produced two versions of the same webm file, one with VP8 encoding and another with VP9 encoding. I 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.

EDIT2: Here is a page with some good explanation that I don't fully understand, https://sites.google.com/a/webmproject.org/wiki/alpha-channel I'm sure it's all about getting those parameters right to make it work on all android devices. Like the football/soccer player's video on

https://simpl.info/videoalpha/

...on my desktop (chorme/windows), on my tablet (chrome/android) and on my SONY phone (chrome/android) both the dancer and the soccer player videos are displayed correctly with a transparent background through 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. How can that soccer player's video work on all android devices; I want my webm files to do the same but don't know how to achieve that.

like image 691
PWA-developer Avatar asked Jun 10 '19 19:06

PWA-developer


People also ask

Does VP9 support transparency?

To convert to webm, use the VP9 encoder. VP9 can handle transparency.

How do you make a WebM transparent?

Creating a WebM video with Alpha channel​ In order to render your videos transparent, you need to change 3 settings: Render each frame as PNG. Use the VP8 or VP9 codec. Use the yuva420p pixel format.

Does WebM video support transparency?

You can make images with transparent backgrounds using GIF, PNG, or WebP but how about a video with a transparent background? You might think it's not possible but there's a perfect solution for it. Yes, it's WebM.


1 Answers

At long last I have a partial solution.

I was able to achieve consistent transparency on various devices by using animated 'webp' files instead of 'webm' files. Since my videos are very short and have no audio, using animated webp files were the best solution for me.

With this approach 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. It worked on every device in my tests.


Some useful notes about webps,

  1. 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.
  2. As of iOS 15 some frames in animated webp files can be horizontally cropped due to some bugginess in Safari.
like image 155
PWA-developer Avatar answered Oct 12 '22 22:10

PWA-developer