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

Posted

技术标签:

【中文标题】透明视频,如何在每台设备上正确显示 webm 文件的 alpha 通道; VP9 还是 VP8 编码?【英文标题】:Video with transparency, how to display alpha channel of webm files correctly on every device; VP9 or VP8 encoding? 【发布时间】:2019-10-25 04:51:12 【问题描述】:

关于如何通过 Alpha 通道获得带有 webm 视频的透明背景, 有人说您应该使用 VP8 而不是 VP9 进行编码。

WebM Alpha only displayed in Chrome?

另一个人说它是相反的,应该是 VP9 而不是 VP8。

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

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

编辑1: 这是一些测试结果!我制作了同一个 webm 文件的两个版本,一个使用 VP8 编码,另一个使用 VP9 编码。我已经运行测试以在不同的设备上查看它们。在索尼手机(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 我确信这一切都是为了让这些参数正确,使其适用于所有安卓设备。喜欢足球/足球运动员的视频

https://simpl.info/videoalpha/

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

【问题讨论】:

我一直在使用 Adob​​e Media Encoder 来生成我的 webm 文件。那个足球运动员的视频文件一定是用一些我希望我知道的好设置和好方法编码的。我会尝试 ffmpeg 并发布结果。 我尝试使用 ffmpeg 代替 Adob​​e Media Encoder。结果完全一样。接下来我将尝试在 mediacoderhq.com 上找到的另一个名为 MediaCoder 的软件 结果:我无法使用 mediaCoder 获得任何令人满意的结果。 【参考方案1】:

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

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

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


一些关于 webps 的有用说明,

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

【讨论】:

【参考方案2】:

我发现(至少在我的情况下)显示透明度的问题与 webm 视频分辨率有关。

Google official guide 上显示的分辨率为 640x360 的 webm 在低端设备上运行良好,事实上,official example 中带有 alpha 的两个 webm 视频都具有 nHD 分辨率,这有很多缺点。

如果您更改 nHD 分辨率,Alpha 通道将在低端设备上停止工作。 也许这可能取决于设备的处理能力(可能与 alpha channel 的 webm 内部工作方式或 this issue 中指出的 GPU 驱动程序有关?)。

【讨论】:

好吧,即使这是真的,我的测试表明分辨率可能不是失败的唯一原因。有时结果似乎只取决于移动设备的品牌(例如相同的浏览器,不同的设备)。我还记得在三星手机上进行测试时,Chrome-for-mobile 没有显示 alpha 而三星互联网浏览器显示。那是同一台设备,只是浏览器不同。

以上是关于透明视频,如何在每台设备上正确显示 webm 文件的 alpha 通道; VP9 还是 VP8 编码?的主要内容,如果未能解决你的问题,请参考以下文章

C# 桌面背景可能显示不正确的位置?

将 PNG 转换为具有透明度的 webm 视频

UNITY记录——导入透明视频

如何(功能)检测浏览器是不是支持 WebM alpha 透明度?

Unity 播放透明视频新思路

如何创建 WebM 视频文件?