哪些浏览器支持透明的 WebM？
移除背景是简单的部分。 这一页涵盖了在实际应用中需要考虑的部分：选择的格式、标记以及在您未测试的浏览器上，Alpha 视频失效的情况。
来源：绿屏键控示例
原始样本·MP4·4秒·移动主体，边缘柔和
本示例导出 alpha WebM 格式。 将导出格式切换，以便比较相同的片段，以 Lottie ZIP 格式或透明 GIF 格式，在确定使用一种格式之前。
试试这个示例问题
透明视频在您的机器上看起来已经完成，但在访客的浏览器中，可能会显示为黑色方框、白色方框，或者根本不显示。透明视频是网络上，格式决定页面是否正常显示的地方之一，而这种失败是无声的。
您找到的建议通常是格式名称，没有附加条件。Alpha WebM 在 Chromium 浏览器和 Firefox 中播放，但在并非所有 Safari 版本中无法播放；透明 GIF 在任何地方都能正常显示，并且看起来效果很好，具有清晰的边缘和有限的色彩；Lottie 软件包可以很好地缩放，但需要播放器，对于关键帧的素材，仍然包含栅格图像。
在下方，是一个没有人明确做出的决定：这个素材是否应该作为视频。 一个短循环通常比视频编解码器更小、更清晰，例如，通过CSS驱动的Lottie或PNG序列。
浏览器工作流程
在这里导出相同的片段，并以多种格式保存，然后比较实际的文件，而不是从表格中选择。 转换键在本地，并且可以切换输出格式，而无需重新进行键定。
Alpha WebM 是当您的观众使用 Chromium 或 Firefox 时，网页的默认选择。 务必提供备选方案：例如，一张海报图像或第二个来源，以确保没有 alpha 支持的浏览器不会显示黑色矩形。
对于一个小循环元素，建议先尝试 Lottie ZIP 和 PNG 序列，然后再选择视频。 网页集成指南涵盖了如何解压 Lottie ZIP 文件以及将播放器指向其图像资源，而这通常是大多数人容易出错的一步。
完成任务
关键该片段
将视频添加进来，选择背景颜色，并调整阴影效果，直到边缘与页面实际使用的颜色对齐。
首先导出 alpha WebM 格式
这是在网页上最佳支持的实 α 视频。请注意，这种格式的录制需要一个支持的浏览器：在 Firefox 中无法进行，但 Firefox 可以播放结果。
添加标记，并提供备选方案
使用一个柔和的、循环播放的、嵌入式视频元素，并带有海报图像。海报是那些不支持 alpha 的浏览器显示的，因此请选择一个可以独立显示的帧。
在真实背景下测试
将它放置在实际页面背景上，而不是使用网格，并在手机上进行检查。在深色背景下出现光环和边缘，而在浅色背景下则消失。
与其它方案进行比较
导出相同的片段，以 Lottie ZIP 格式和 PNG 序列形式保存，并比较文件大小和清晰度。对于短循环，通常其中一个会胜出。
常见用例
英雄和章节强调
将带有关键的素材漂浮在渐变或照片上，而无需矩形边缘，从而避免视频的特征。
空状态与引导
将一个小的循环动画角色发送到，使其位于周围组件使用的任何背景上，包括深色模式。
Email安全和文档安全备选
当目标无法播放任何视频时，将相同的片段导出为透明 GIF 格式，并接受其硬边。
常见问题
透明 WebM 在 Safari 中工作吗？
不可保证。Alpha WebM 在 Chromium 浏览器和 Firefox 中可用；Safari 的支持因版本和平台而异，因此，除非您已测试您访问者使用的确切版本，否则将其视为不支持。 始终提供海报或备用方案。
为什么我的透明视频显示黑色背景？
通常情况下，因为浏览器解码了视频，但忽略或无法读取 alpha 通道，导致透明像素显示为黑色。为了适应该浏览器，需要切换到海报图像、Lottie 包或透明 GIF 格式。
我应该使用哪种标记？
一个静音、循环播放、自动播放，并内嵌的视频元素，带有海报属性。静音和内嵌，使得移动浏览器能够实现自动播放；而海报则是在不支持 alpha 时使用的备用方案。
透明 GIF 足够吗？
这取决于边缘。GIF的透明效果是二元性的——一个像素要么完全不透明，要么完全透明——因此，柔和的边缘会变得粗糙，而半透明的阴影是不可能的。对于具有硬边缘的标志或图标，效果很好；但对于带有关键效果的人或柔和的光芒，则会显得廉价。
我是否应该使用 Lottie 而不是视频？
对于短循环，通常是。在使用 Lottie 时，请务必确认您使用的 Lottie ；如果从带有关键帧的视频导出 Lottie，则包含栅格图像帧，因此会像图像序列一样进行缩放，并且无法保证比视频更小。而作为矢量编写的 Lottie 是一种不同的且更好的资源。
如何将导出的 Lottie ZIP 文件加载到我的网站上？
ZIP 文件包含 JSON 及其图像资源，并且播放器需要同时保留这两个文件以及路径。 网页集成指南会介绍如何解压并将 lottie-web 指向资源文件夹。