Chrome 视频的 Alpha 透明度

弗朗索瓦·博福
François Beaufort

Chrome 视频中的 Alpha 透明度

现在,Chrome 31 在 WebM 中支持视频 Alpha 透明度。

也就是说,当使用 Alpha 通道播放绿幕编码为 WebM(VP8VP9)的视频时,Chrome 会将 Alpha 通道考虑在内。也就是说,您可以在网页、图片甚至其他视频上播放具有透明背景的视频。

simpl.info/videoalpha 上可以找到演示。有点超现实,边缘有点粗糙(字面意思),但你能明白!

如何制作 Alpha 版视频

我们介绍的方法使用开源工具 Blender 和 ffmpeg:

  1. 在单色背景(例如亮绿色窗帘)前拍摄拍摄正文。
  2. 处理视频,以构建包含透明度数据的 PNG 静态图片数组。
  3. 将其编码为视频格式(在本例中为 WebM)。

此外,还有一些专有工具也可完成同样的工作,例如 Adobe After Effects,您可能认为这些工具更简单。

1. 制作绿幕视频

首先,在拍摄对象时,您需要确保背景中的所有内容都可以在后续处理中“移除”(变为透明)处理。

最简单的方法是在单色背景(例如屏幕或窗帘)前拍摄。绿色或蓝色是最常用的颜色,主要是因为它们与肤色不同。

您可以在线提供一些 在线指南来拍摄绿幕视频(也称为色度键),还可以在很多地方购买绿幕和蓝屏背景幕。或者,您也可以使用色度键绘制来绘制背景。

《The Great Gatsby VFX》短片集展示了使用绿幕可以达成多少成就。

一些拍摄提示:

  • 确保拍摄对象的衣服或物体与背景没有相同的颜色,否则它们在最终视频中将显示为“洞”。即使是小的徽标或珠宝首饰也可能会出现问题。
  • 使用一致、均匀的光线,并避免阴影:目标是使背景色的颜色范围尽可能小,随后需要将这些颜色变为透明。
  • 使用多个漫射光有助于避免阴影和背景颜色变化。
  • 避免使用有光泽的背景:哑光表面可以更好地漫射光线。

2. 根据绿幕视频创建原始 Alpha 视频

以下步骤介绍了一种根据绿幕视频创建原始 Alpha 视频的方法:

  1. 拍摄绿幕视频后,您可以使用 Blender 等开源工具将视频转换为包含 alpha 数据的 PNG 文件数组。使用 Blender 的颜色键控可以移除绿幕并将其变为透明。(请注意,PNG 不是必需的:任何保留 Alpha 通道数据的格式都可以。)
  2. 使用 ffmpeg 等开源工具将 PNG 文件数组转换为原始 YUVA 视频:

    ffmpeg -i image%04d.png -pix_fmt yuva420p video.raw

    或者,您也可以使用如下所示的 ffmpeg 命令将文件直接编码为 WebM:

    ffmpeg -i image%04d.png output.webm

如果要添加音频,可以使用 ffmpeg 通过如下命令进行多路复用:

ffmpeg -i image%04d.png -i audio.wav output.webm

3. 将 Alpha 视频编码为 WebM

原始 Alpha 视频可通过两种方式编码为 WebM。

  1. 使用 ffmpeg:我们添加了对 ffmpeg 的支持,可对 WebM Alpha 版视频进行编码。

    将 ffmpeg 与包含 Alpha 数据的输入视频结合使用,将输出格式设置为 WebM,系统就会根据规范自动以正确的格式进行编码(注意:您目前需要确保从 Git 树获取最新版本的 ffmpeg,才能执行此操作。)

    示例命令:

    ffmpeg -i myAlphaVideo.webm output.webm

  2. 使用 webm-tools:

    git clone https://chromium.googlesource.com/webm/libvpx

    webm-tools 是一组与 WebM 有关的简单开源工具,由 WebM 项目的作者进行维护,其中包括一个用于创建具有 Alpha 透明度的 WebM 视频的工具。

    使用 --help 运行二进制文件以查看 alpha_encoder 支持的选项列表。

4. 在 Chrome 中播放

若要在 Chrome 中播放已编码的 WebM 文件,只需将该文件设为视频元素的来源即可。

他们是如何做到的?

我们采访了 Google 工程师 Vignesh Venkatasubramanian,介绍了他在本项目中开展的工作。他总结了所涉及的主要挑战:

  • VP8 比特流不支持 alpha 通道。因此,我们必须在不破坏 VP8 比特流和破坏现有玩家的情况下整合 Alpha 版。
  • Chrome 的渲染程序无法使用 alpha 呈现视频。
  • Chrome 针对多种硬件/GPU 设备提供了多条渲染路径。您必须更改每个渲染路径,以支持 Alpha 版视频的渲染。

我们可以想出许多有趣的视频 Alpha 透明度用例:游戏、互动式视频、协作式故事讲述(将自己的视频添加到背景视频/图片中)、带有替代角色或情节的视频、使用叠加视频组件的 Web 应用。

祝您制作愉快!如果您利用 Alpha 版透明度打造了出色的产品,请告诉我们。

实用资源