【问题标题】:Looping animation over web content在网页内容上循环播放动画
【发布时间】:2018-03-18 15:30:15
【问题描述】:

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

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

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

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

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

【问题讨论】:

标签: html video alpha-transparency


【解决方案1】:

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

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

【讨论】:

  • 那么在这种情况下,webM 视频是否需要托管在 Youtube/Vimeo 以外的其他平台上?我环顾四周,在讨论中看到了“内容交付网络”,但我什至从未听说过它们,更不用说知道如何将它们用于这样的事情了。
  • 我不希望视频在 Youtube 和 Vimeo 等网站上使用时保持 alpha,因为它们实际上 重新编码上传的视频文件。您可以像其他资产一样在自己的网站服务器上托管视频文件。我建议检查哪些浏览器可以处理 webM 格式。您是否通过 Android/iOS 浏览器进行了检查?Safari 或 Internet Explorer 呢?不是每个人都会使用 Chrome 浏览器。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-12-10
  • 2023-03-31
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多