css - 使用 Videojs 自定义文本水印

Question

我们正在使用 VideoJS.m3u8从 VOD 服务器流式传输文件。
在播放器上，我们要插入一个自定义文本水印，该水印每秒从“上到下”移动，然后从“右到左”移动。

问题：
如何插入自定义文本水印？

Answer 1

由于您使用的是 VideoJS，因此您将<video>涉及到一个标签。

(1)<div>为<span>文本元素和元素创建一个容器<video>。

(2)给文本一个 ID 和更高层的位置（通过z-index在标签设置中）。
还设置position: absolute允许轻松设置 X 和 Y 位置。
例子：
<span id="myText" style="z-index: 2; position: absolute; top: 0px; left: 0px"> your text here </span>

(3)通过 JavaScript更改top和leftin 标记设置，为文本位置设置动画。

• 动画可以通过Timer（其中处理函数使用IF语句来设置位置）。您需要变量来记录您的坐标。
  

• 动画可以通过CSS 关键帧（参见示例：使用 JavaScript 运行 CSS 动画）。
  

• 动画可以通过Animate API实现（参见示例：Animate API 简介）。