Custom Text Watermark with Videojs

Question

We are using VideoJS to streaming a .m3u8 file from VOD server.
On the player we want to insert a custon text watermark that is moving from "up to down" and then also from "right to left" every seconds.

Question:
How can I insert custom text watermark?

Answer 1

Since you're using VideoJS then you'll have a <video> tag involved.

(1) Make a <div> as container for both the <span> text element and also <video> element.

(2) Give the text an ID and a higher layer position (through z-index in the tag setup).
Also set the position: absolute for allowing to set X and Y positions easily.
example:
<span id="myText" style="z-index: 2; position: absolute; top: 0px; left: 0px"> your text here </span>

(3) Animate the text position by changing the top and left in tag setup via JavaScript.

• Animation could be via Timer (where the handling function uses IF statements to set positions). You'll need variables to note your coordinates.
  

• Animation could be via CSS KeyFrames (see example: Using JavaScript to run CSS animation).
  

• Animation could be via Animate API (see example: Introduction to the Animate API).