在网页内容上循环播放动画

Posted 2023-05-07

【中文标题】在网页内容上循环播放动画

【英文标题】：Looping animation over web content

【发布时间】：2018-03-18 15:30:15

【问题描述】：

几周以来，我一直在寻找一种将带有 alpha 的循环动画放在网络内容之上的方法。我似乎找不到任何人问这个问题或任何答案，这一事实让我认为解决方案非常简单，没有人需要问它。

有关此效果的示例，请转到bonfirestudios.com

他们在整个网站上多次使用这种技术，最引人注目的是他们在主页上的徽标。他们在其网站内容之上播放动画循环。它可能只是一个使用屏幕混合模式播放的视频，但我对 html 和 css 的了解非常有限，我不确定我应该寻找什么。

概念上似乎很简单：循环播放视频（带有 alpha 数据），但我找不到任何解释如何实现此效果的内容（或不知道具体在哪里/如何查看）。值得注意的是，没有视频控件或任何其他指示它正在播放的视频。我检查了他们的代码，但我对 javascript 等的了解有限，很难知道我在寻找什么。

非常感谢任何帮助或指导，谢谢。

【问题讨论】：

你的意思是CCS3 animation？

@Xorifelse 不，他们的意思是transparent video（在 Chrome 浏览器中查看以获得最佳效果）。可以在网站上看到透明度：bonfirestudios.com

啊，我明白了。只是一个在 html 5 属性中播放的视频（支持 alpha），控件被禁用。

Can I have a video with transparent background using HTML5 video tag?的可能重复

【参考方案1】：

这是一个正在播放的视频（右键单击动画，您会看到“保存视频”等选项）。

容器格式为 webM（可包含 VP8 或 VP9 视频编解码器）。 此格式为from Google and supports transparency。

【讨论】：

那么在这种情况下，webM 视频是否需要托管在 Youtube/Vimeo 以外的其他平台上？我环顾四周，在讨论中看到了“内容交付网络”，但我什至从未听说过它们，更不用说知道如何将它们用于这样的事情了。

我不希望视频在 Youtube 和 Vimeo 等网站上使用时保持 alpha，因为它们实际上 重新编码上传的视频文件。您可以像其他资产一样在自己的网站服务器上托管视频文件。我建议检查哪些浏览器可以处理 webM 格式。您是否通过 android/iOS 浏览器进行了检查？Safari 或 Internet Explorer 呢？不是每个人都会使用 Chrome 浏览器。