使用 Videojs 自定义文本水印

Question

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

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

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 和 left 来为文本位置设置动画。

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

• 动画可以通过 CSS KeyFrames（参见示例：Using JavaScript to run CSS animation）。
  

• 动画可以通过 Animate API（参见示例：Introduction to the Animate API）。