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