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

时间:2019-06-10 19:15:14

标签: android css html5-video webm alpha-transparency

关于如何通过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文件?

  

EDIT1:   这里有一些测试结果!我已经制作了同一webm文件的两个版本,一个使用VP8编码,另一个使用VP9编码。我已经运行测试以在不同的设备上查看它们。在SONY手机(android / chrome 74)上,带有VP8编码的手机正确显示为透明背景,而带有VP9编码的手机的背景为纯黑色而不是透明的。在华为手机(android / chrome 74)上,情况恰恰相反!带有VP9的显示器正确显示,而带有VP8的显示器背景填充为纯黑色而不是透明。在ASUS平板电脑上,VP8和VP9均正确显示。在XIAOMI手机上,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透明背景正确显示频道(预期)。但是在HUAWEI和XIAOMI手机上,只有足球/足球运动员的视频能够正常工作,而奇怪的是,舞者的背景充满了纯灰色。该足球运动员的视频如何在所有android设备上运行;我希望我的webm文件也能这样做,但是不知道如何实现。

2 个答案:

答案 0 :(得分:1)

终于我有了部分解决方案。 通过使用动画的“ webp”文件而不是“ webm”文件,我能够在各种设备上实现一致的透明性。 由于我的视频很短而且没有音频,因此使用动画的webp文件对我来说是最好的解决方案。 使用这种方法,您希望将视频的每一帧保存为单独的文件(例如带有alpha的未压缩PNG),然后从https://github.com/webmproject/WebPShop获取Photoshop的webp插件。 最后,将每个帧放在Photoshop的一个图层上,并命名每个图层,例如(50 ms)或(100 ms)。 (层名称应包括括号)。还有“另存为” webp,这要感谢您的新插件。它适用于我测试中的所有设备。

答案 1 :(得分:0)

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

Google official guide上显示的分辨率为640x360的webm在低端设备上效果很好,实际上两个official example中具有alpha值的webm视频都具有nHD分辨率,这有很多缺点

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