Dynamic Watermarking

Add dynamic watermarking over the video player to avoid the risk of piracy due to screen capture. Our easy to use library allows you to add custom text as text overlays over the video player to identify the user and source of piracy.

Suggest Edits

Step 1: Include our javascript on the page

First add our dynamic watermarking javascript in the head section of your page.

...
<head>
  ...
  <script src="https://cdn.gumlytics.com/watermark/1.0/gumlet-dynamic-watermark.min.js"></script>
</head>
...

Step 2: Wrap your video player in a div with a unique id

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.

Step 3: Initialise the dynamic watermarking on the video player

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.

...
<script type="text/javascript">
  window.gumlet.addWatermark(
    '<id of the container div>',
    '<watermark text>',
    '<font color>',
    '<background color of text overlay>',
    '<time interval at which overlay will change position>'
  )
</script>
...

👍

Successfully integrated dynamic watermark

addWatermark()

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.

ArgumentDescriptionTypeExample ValueDefault value
videoContainerID*ID of the wrapper around the video tagStringplayer
text*Overlay text to be shown on the video playerString192.168.1.1
fontColorFont color of the overlay textStringred or #ff0000red
backgroundColorRGBABackground color of the text overlayStringrgba(0, 0, 0, 0.2)rgba(0, 0, 0, 0.2)
changeIntervalInterval at which the text overlay changes it's position on the video player. The value is considered to be in milliseconds.Int15001000

*Required Values which need to be passed during function call

Updated 11 months ago