Chrome 视频的 Alpha 透明度

“Chrome 中的 Alpha 透明度”视频

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

换言之,在播放“绿幕”时,Chrome 会考虑 Alpha 通道使用VP8VP9 也就是 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. 使用开源工具将 PNG 文件数组转换为原始 YUVA 视频 如 ffmpeg:

    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,了解他在 Google Cloud 项目。他总结了这场会议面临的主要挑战:

  • VP8 比特流不支持 Alpha 通道。因此,我们需要将 alpha 版,而不会破坏 VP8 比特流,也不会破坏现有 玩家。
  • Chrome 的渲染程序无法使用 alpha 渲染视频。
  • Chrome 具有适用于多种硬件/GPU 设备的多个渲染路径。每个 必须更改呈现路径才能支持呈现 alpha 版视频。

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

祝您在电影制作过程中一切顺利!如果您使用 Alpha 版构建了精彩的功能,请告诉我们 透明度。

实用资源