【问题标题】:Overlay Text on Video Clip在视频剪辑上叠加文本
【发布时间】:2021-08-25 20:14:43
【问题描述】:

我使用 HTML、CSS 和 JS 创建了这个单页网站 (https://pixelwatch-bycliff.web.app/),但我想通过将这个视频剪辑 (https://www.pexels.com/video/multi-colored-vapor-1943483/) 添加到文本 (Wear OS) 中来做更多的事情,这样文本会充满活力,同时随着视频的出现。 PS:我自己尝试过,但无法让它工作,现在任何帮助将不胜感激。

github上的文件链接:https://github.com/ManLikeCliff/pixelwatch-bycliff click to view the text

【问题讨论】:

  • 酷设计 :-) “将视频添加到文本”到底是什么意思?添加在哪里,如何添加?能给我举个例子吗?另外,你应该提供你自己的研究,你尝试过什么代码......
  • 请您将代码 sn-p 放入您的问题中,我们可以运行它来查看问题。特别是您如何插入视频?
  • 谢谢????,这是我正在尝试做的一个示例codepen.io/corvus-007/pen/vYEXLmg,但在我的情况下,我希望视频(不是天鹅自己的)在 Wear OS 中。我会在回家后尝试使用我尝试过的代码来更新它。
  • 它通过调整字体大小对我有用。我用你想要的视频替换了天鹅。见这里:codepen.io/sgruenwald/pen/KKqdpQe
  • 一切顺利,再次感谢您。我使用 Stefan 的代码来调整我的代码,并且成功了。

标签: html css frontend


【解决方案1】:

我认为有两种方法可以实现。

  1. 将叠加在视频上的文字制作为 .gif 格式。也就是说,您基本上是在插入图像文件。

  2. 我相信您想使用 CSS。那么,你不妨明智地考虑布局。

首先,让您的视频回到文本。在这种情况下,可以将视频设置为背景。然后,通过赋予position: absolute; 属性,将z-index 赋予上面的覆盖文本。

如果需要,可以查看here

【讨论】:

  • 我会试一试,看看它是否有效。谢谢
猜你喜欢
  • 2019-07-03
  • 1970-01-01
  • 2016-06-29
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-11-13
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多