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?

VC.One · Answer 1 · 2022-01-25T18:32:29.557

0

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).

edited Jan 25 '22 at 18:32

answered Jan 25 '22 at 18:26

VC.One

14,790
4
25
57

this is easy to remove by user :( – Pedram Gholizadeh Feb 27 '22 at 13:26
You said _"**On the player** we want to insert a custom text watermark"_... Anything you add to the player can be removed (or bypassed) by not using that same player. If you want something that is not easy to remove then you have to edit the video pixels themselves (meaning: re-save the video with watermark animation added, then wherever video goes the animation is there also). You can use Canvas to create the animation, export the frames as PNG images, then use a tool like **FFmpeg** to make a video from images, then also use FFmpeg to "overlay" that animation over the main video. – VC.One Feb 27 '22 at 22:48

Custom Text Watermark with Videojs

1 Answers1