透明视频,如何在每台设备上正确显示webm文件的alpha通道;VP9 还是 VP8 编码?

The*_*ist 5 css android alpha-transparency html5-video webm

关于如何通过 alpha 通道获得带有 webm 视频的透明背景,这里有一个人说你应该用 VP8 而不是 VP9 进行编码。

WebM Alpha 仅显示在 Chrome 中?

还有一个人说这是相反的事情,就像它应该是 VP9 而不是 VP8。

透明的 webm 视频在 Android 9.0 上的 Android 68 版 Chrome 上显示纯色背景

有没有办法让每个设备正确显示包含 alpha 通道的 webm 文件?

EDIT1:这里有一些测试结果!我制作了同一个 webm 文件的两个版本,一个使用 VP8 编码,另一个使用 VP9 编码。我已经运行测试以在不同的设备上查看它们。在 SONY 手机 (android/chrome 74) 上,使用 VP8 编码的手机以透明背景正确显示,而使用 VP9 编码的手机的背景填充为纯黑色而不是透明。在华为手机(android/chrome 74)上正好相反!带有 VP9 的显示正确,而带有 VP8 的背景填充为纯黑色而不是透明。在华硕平板电脑上,VP8 和 VP9 都能正确显示。在小米手机上,VP8 和 VP9 都无法正确显示。

EDIT2:这是一个我不完全理解的页面,其中有一些很好的解释, https://sites.google.com/a/webmproject.org/wiki/alpha-channel 我确定这完全是为了正确设置这些参数使其适用于所有 android 设备。喜欢足球/足球运动员的视频

https://simpl.info/videoalpha/

...在我的桌面 (chorme/windows)、我的平板电脑 (chrome/android) 和我的 SONY 手机 (chrome/android) 上,舞者和足球运动员的视频都通过 alpha 通道以透明背景正确显示(即是期待)。但是在华为和小米手机上,只有足球/足球运动员视频按预期工作,而奇怪的是,舞者的背景充满了纯灰色。该足球运动员的视频如何在所有安卓设备上播放;我希望我的 webm 文件也能做到这一点,但不知道如何实现。

The*_*ist 5

终于我有了一个部分解决方案。

通过使用动画“webp”文件而不是“webm”文件,我能够在各种设备上实现一致的透明度。由于我的视频非常短并且没有音频,因此使用动画 webp 文件对我来说是最好的解决方案。

通过这种方法,您希望将视频的每一帧保存为单独的文件(例如带 Alpha 的未压缩 PNG),然后从https://github.com/webmproject/WebPShop获取适用于 Photoshop 的 webp 插件。最后将每个帧放在 Photoshop 中的一个图层上,并将每个图层命名为“(50 ms)或” (100 ms)(包括括号)。感谢您的新插件,“另存为”webp。在我的测试中,它适用于所有设备。


关于 webps 的一些有用的注释,

  1. webp 文件大小和压缩率并不总是成正比。例如,在某些情况下,以 90% 质量而不是 80% 质量保存实际上可能会减小文件大小!奇怪但真实。
  2. 从 iOS 15 开始,由于 Safari 中的一些错误,动画 webp 文件中的某些帧可以水平裁剪。