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

问题描述 投票:0回答:2

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

WebM Alpha 仅在 Chrome 中显示?

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

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

所以问题是,

有没有办法让每个设备都显示包含以下内容的webm视频文件 Alpha 通道信息正确吗?

这是我们的测试结果:我们生成了同一 webm 文件的两个版本,一个使用 VP8 编码,另一个使用 VP9 编码。我们已经进行了测试以在不同设备上查看它们。在 SONY 手机(android/chrome 74)上,使用 VP8 编码的手机可以正确显示透明背景,而使用 VP9 编码的手机则其背景填充为纯黑色而不是透明。在华为手机(android/chrome 74)上,情况恰恰相反! VP9 的显示正确,而 VP8 的背景填充为纯黑色而不是透明。在华硕平板电脑上,VP8 和 VP9 都能正确显示。在小米手机上,VP8 和 VP9 均无法正确显示,并且本应透明的像素也无法正常显示。

文档遗憾的是没有为我们提供一步一步的指导来轻松找出哪些参数导致哪个结果,因此我们不知道为什么不同设备之间的情况如此不一致。

值得一提的例子:Sam Dutton 的 simpl.info 上有......

https://simpl.info/videoalpha/

...在桌面(chorme/windows)、平板电脑(chrome/android)和索尼手机(chrome/android)上查看时,舞者和足球运动员视频均通过 Alpha 正确显示,并具有透明背景频道(这是预期的)。但在华为和小米手机上,只有足球运动员视频能按预期工作,而奇怪的是,舞者的背景充满了纯灰色。事实证明,足球运动员的视频可以在所有 Android 设备上运行。令人好奇的是,我们实际上问过萨姆·达顿本人如何实现这一目标。在他的回答中,他说他不记得用于生成 webm 文件的设置,因为距离那时已经有好几年了。

有一点可能值得了解(即使与问题没有直接关系),如果

WEBM
文件仅包含音频而没有任何视频,它仍然可以在 Windows 和 Android 中播放(理论上质量比
 更好) OGG
),但 Safari(尤其是 2024 年的移动 Safari)仅部分支持 WEBM 音频,这是不可靠的。

android css html5-video webm alpha-transparency
2个回答
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 文件中的某些帧可以水平裁剪。

0
投票

我发现(至少就我而言)显示透明度的问题与 webm 视频分辨率有关。

Google 官方指南 上显示的分辨率为 640x360 的 webm 在低端设备上运行良好,实际上 官方示例 中带有 alpha 的 webm 视频都具有 nHD 分辨率,这有很多缺点。

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

© www.soinside.com 2019 - 2024. All rights reserved.