在争吵跨浏览器支持的同时，用透明度覆盖视频-css教程-PHP中文网

首页

web前端

css教程

在争吵跨浏览器支持的同时，用透明度覆盖视频

Lisa Kudrow

Mar 31, 2025 am 09:14 AM

在争吵跨浏览器支持的同时，用透明度覆盖视频

随着网站在设计方面变得越来越动态，有时需要结合复杂的动画元素。从CSS过渡到画布上的3D渲染以及动画SVG，有很多方法可以做到这一点。但是通常更容易使用

但是，如果您需要该视频上的透明背景，以便它可以覆盖并似乎与页面上的其他内容交互怎么办？有可能，但可能很棘手，尤其是跨浏览器。让我们探索这一点。

这是一个例子

要了解透明视频叠加的工作方式，我准备了一个示例，希望我既有趣又相关。这个想法是将视频与下面的交互式内容集成在一起，以使视频背后的内容随着滑块的前进而发生变化。这是一个滑块广告狗食，带有覆盖层上狗的真实视频，我敢肯定，现实，可爱的狗会提高转化率！

您可以按照本文进行关注以自己重新创建此演示。创建这样的视频所需的部分是“图像序列”（一堆alpha-transparent图像，我们会将其拼接在一起的视频）。我正在提供用于示例的图像。

下载图像

探索可能性

为了实现这种效果，我首先搜索一种纽约解决方案，该解决方案可以使我可以在页面上插入具有透明背景的动画内容。

GIF

出现的第一件事是GIF。即使GIF格式是在30年前引入的，但仍被广泛使用。不幸的是，它有其局限性。尽管它适用于简单和小型的动画图形，但它对于色彩鲜艳，长时间的视频镜头并不是很棒，它的颜色空间有限，并且在复杂的视频中的尺寸很大。

apng

我研究的下一个选择是APNG ，由于某种原因，它不像GIF那样受欢迎，但要好得多。（我什至不知道它存在，对吗？）APNG在支持24位图像和8位透明度的同时，APNG与动画GIF文件相似。它也与常规PNG向后兼容。如果不支持APNG，则将显示第一帧。它得到了受欢迎的浏览器的支持，但是Internet Explorer 11中没有支持（是的，有些人仍然必须支持）。虽然暂时走了一会儿，但我对它的文件大小和性能并不满意。

有趣的事实： Apple在iOS 10 Imessage应用程序中采用了APNG格式作为动画贴纸的首选格式。

通过PNG循环

接下来，我想到了一个粗略的，但有效的想法是：使用一堆PNG ，并与JavaScript一起循环循环以模仿视频。但是，它需要使用大量数据传输（每个视频框架都是一个单独的图像）和资源来动画（您可以快速排出用户的电池或使他们的计算机风扇发疯）。

我很快放弃了这个想法，但事实证明这很有用。我将在文章结尾回到这一点。

Webm具有alpha透明度

随着在争吵跨浏览器支持的同时，用透明度覆盖视频的所有格式在这里失败，我开始研究视频。我发现了一篇有关Chrome视频中Alpha透明度的文章，该视频于2013年发布，该视频宣布了使用Alpha频道对WebM的Google Chrome支持。它甚至显示了一个示例，并分享了如何使用它的提示。我浏览了这篇文章，这立即感觉像是要走的路。在将图像序列转换为WebM之后，我更加相信，因为GIF的权重为5.8 MB，但使用相同的帧速率和全颜色的WebM具有透明度，只有540 KB！这是小的10倍以上，同时提供更好的性能和质量。惊人的！

不过，欢乐并没有持续很长时间。一旦我在iOS手机上打开网站时，我就意识到我应该从检查浏览器兼容性开始。不幸的是，Safari（IOS和MACOS）不支持WebM中的透明度。当我的视频在Chrome，Firefox和Edge上完美运行时，Safari用丑陋的黑色背景向我致意。

搜索继续...

一个很好的解决方案

值得庆幸的是，我从WWDC 2019中找到了一个视频，宣布HEVC视频，并在iOS 13和Macos Catalina开始，并支持Alpha支持Safari。它似乎提供了与WebM相同的功能，但在Apple设备上提供了支持。因此，我决定使用混合解决方案：Safari和WebM的HEVC用于其他浏览器。

似乎是完美的解决方案。但是现在我们有两个任务：

用α-透明度创建HEVC
检测Safari（和版本）以服务正确的格式

创建透明视频

我们将从简单的部分开始：创建WebM文件。如果要创建，转换甚至编辑视频文件，则FFMPEG是您的朋友。这是一个非常强大的开源多媒体框架，如果您与多媒体文件有任何关系，我建议从那里开始，因为它有很多事情。我可以说FFMPEG帮助我将视频文件尺寸减少了10次，而没有任何可见的图像质量降解。但是，让我们回到透明度。

根据我的经验，如果您需要将动画元素包含在网站布局中，则将它们作为PNG中的一组视频帧。即使在我的示例项目上工作时，从视频中删除背景的工具也为我生成了一组图像。因此，假设我们正在从一组图像中构建视频（请记住，您可以下载我们的集合），但是即使您有一个视频文件，该过程看起来也相似（根据您的需求调整FFMPEG选项）。

我们现在准备创建视频。使用命令行，我们将导航到包含PNG文件的文件夹并运行以下命令：

 ffmpeg -framerate 25 -i unscreen- =。png -c：v libvpx -vp9 -pix_fmt yuva420p output.webm

您可以调整参数以满足您的需求：

Framerate：输出视频中的1张将使用多少图像
-i开放 - =。png：输入文件名和格式。我的文件有001到150的数字，因此我用作掩码，以选择名称中的三位数字的所有文件。
-c：v：指定要使用的编解码器。我希望该视频由VP9编码，该视频得到大多数Web浏览器的支持。
-pix_fmt：指定要使用的像素格式。在我们的CAS中，它应该支持Alpha频道。如果运行FFMPEG -PIX_FMTS，则可以看到所有支持的格式。
output.webm：提供所需的输出文件名作为最后一个参数

还有更多可用的选项，但是我不会深入研究细节，因为可能需要多个文章来浏览它们。示例中提供的命令中提供的那些适合我们的用例。

过程完成后，我们应该看到一个新的output.webm文件，如果您在受支持的浏览器中打开它，您将看到一个视频。容易，对吧？

创建HEVC alpha

由于我们已经准备好WebP文件，因此该转到我们将使用的第二种格式：具有alpha透明度的HEVC 。不幸的是，在撰写本文时，FFMPEG不支持HEVC，因此我们必须使用其他工具。据我所知，使用Alpha创建HEVC的唯一方法是在Mac上使用Finder或Compressor。如果您有PC，则可能必须要求Mac的人为您做。 Compressor应用仅提供最终剪切Pro，因此我不会使用它，尽管值得考虑是否需要自定义设置。

自Macos Catalina以来，Finder具有内置的编码媒体工具来转换视频。它很简单（免费），因此可以满足我们的需求。

Finder期望视频文件作为输入，因此，首先，我们必须将图像序列转换为PRORES 4444。这是一个重要的步骤，因为编码媒体工具不接受任何视频，除非您提供其接受的格式，否则它将失败。它给了我一个或两个头痛，直到我找到了输入文件的正确编码。

我们可以使用FFMPEG创建输入视频。就像创建WebM时所做的那样，我们只需要以适当的参数运行FFMPEG：

 ffmpeg -framerate 25 -i unscreen- =。png -c：v prores_ks -pix_fmt yuva444444p10le -alpha_bits 16 -profile：v 4444 -f mov -vframes -vframes -vframes 150 output.mov.mov

从这一点上开始，需要一个Mac。但是该过程很简单，并且不涉及在终端中键入任何内容，因此，即使您要求与Mac的非技术朋友为您做到这一点，我敢肯定他们可以管理。

准备好prores4444视频，您可以导航到Finder中的包含文件夹，右键单击它，在上下文菜单中，选择“编码选定的视频文件” 。

将出现一个窗口。选择所需的HEVC质量（有两种可供选择），然后检查保留透明度的选项。然后单击“继续”按钮。

片刻之后，您应该看到一个新文件，该文件已用Alpha在HEVC中编码。完成了！在Safari中打开此文件确认透明度有效。

最后但并非最不重要的一点是，是时候在网站上使用视频了！

为所有浏览器提供透明视频

我们可以使用

还有一件事要照顾：一些浏览器支持WebM或HEVC本身，但没有透明度。这些浏览器将播放视频，但具有黑色背景而不是Alpha频道。例如，Safari 12将在没有透明度的情况下进行HEVC。这对我们来说是不可接受的。

通常，我会使用元素将视频以及多种格式作为后备提供，浏览器会选择它支持的视频。但是，由于我们只想在特定的Safari版本上显示HEVC，因此我们必须使用JavaScript设置视频SRC属性。

iOS 13和Mac Safari 13支持HEVC具有透明度，因此让我们从检测到这些开始。根据支持的支持，建议调整网站功能的推荐方法是检测API的存在而不是查看用户代理，但是我没有找到任何简单的方法来检测浏览器是否支持视频格式的透明度。相反，我提出了自己的解决方案。这不是很漂亮，但是可以完成工作。

函数支持shevcalpha（）{
  const navigator = window.navigator;
  const ua = navigator.useragent.tolowercase（）
  const hasmediacapabilities = !!（navigator.mediacapabilities && navigator.mediacapabilities.decodinginfo）
  const issafari =（（ua.indexof（'safari'）！= -1）&&（！
  返回issafari && hasmediacapabilities
}

这是通过查看Navigator.Mediacapabilities（在较旧版本中不支持的MediaCapbilities）来针对Safari 13及以上的目标，并且看着浏览器完全是Safari。如果功能返回，那么我很高兴与HEVC Alpha一起使用。对于任何其他情况，我将加载WebM视频。

这是HTML中如何融合在一起的一个示例：

  

<script>
const player = document.getElementById（&#39;player&#39;）;
player.src = supportshevcalpha（）？ &#39;output.mov&#39;：&#39;output.webm&#39;;
</script>

如果您对视频元素上的那些循环自动播放playsInline论点感到好奇，那就是复制类似GIF的体验：

没有静音，如果没有用户互动，视频将无法播放。
使用PlaySinline，在iOS上，该视频播放在布局中的位置，而不是在全屏上打开。
随着循环，视频一遍又一遍地重复。
使用AutoPlay，它将开始在页面加载上自动播放视频（只要我们也已静音）。

就是这样！我们为透明视频提供了轻巧，性能和高质量的解决方案，可用于大多数现代浏览器（至少是Chrome，Firefox，Safari和Edge的最后两个最新版本）。我们可以添加一些基本的HTML和CSS，以将静态内容整合在一起，并使其更真实，或者仅使用我的演示中的相同想法。那还不错，是吗？

嘿，但是IE 11呢？我的整个公司都在使用它！

通常，我建议将这样的功能限制在现代浏览器中，并将视频隐藏在IE中。该视频可能不是网站的关键要素。虽然，我曾经在一个商业项目上工作，IE 11支持是必须的，我被迫找出一些东西以显示那里的透明视频。最后，我最终用JavaScript骑自行车浏览了PNG图像。我使用计时器减少了框架的数量，并在它们之间切换。当然，表演很糟糕，但奏效。该视频对整个设计非常重要，因此我们决定在IE 11上牺牲性能，以提供完整的体验。