... <head> ... <script src="https://cdn.gumlytics.com/watermark/1.0/gumlet-dynamic-watermark.min.js"></script> </head> ...
Add a container div around your video player for our JS to identify the video tag in which the dynamic watermarking needs to be added. In the code example below we have nested our video tag in a container div with id set as player. You can set the value of the id attribute according to your nomenclature.
... <body> ... <div id="player" style="width: 900px"> <video id="my-video" preload="none" autoplay controls style="width:100%;"> <source src="https://gumlet.sgp1.digitaloceanspaces.com/video/sample_1.mp4" type="video/mp4"> </video> </div> ... </body> ...
Please be careful
Please make sure the video tag is available in the container div itself and is not nested in other HTML tags.
Add a script tag in your HTML code to allow dynamic watermarking to be displayed on the video player. you can use the
addWatermark function provided by JS which has been included in the first step.
Successfully integrated dynamic watermark
The addWatermark function provided by the Gumlet dynamic watermarking package is used to add the watermark over the video player. The function returns nothing and takes the following values as its arguments.
|Argument||Description||Type||Example Value||Default value|
|videoContainerID*||ID of the wrapper around the video tag||String||player|
|text*||Overlay text to be shown on the video player||String||192.168.1.1|
|fontColor||Font color of the overlay text||String||red or #ff0000||red|
|backgroundColorRGBA||Background color of the text overlay||String||rgba(0, 0, 0, 0.2)||rgba(0, 0, 0, 0.2)|
|changeInterval||Interval at which the text overlay changes it's position on the video player. The value is considered to be in milliseconds.||Int||1500||1000|
*Required Values which need to be passed during function call
Updated 5 months ago