Add images and text to video with dynamic watermarking

Checkout the sample video below, with dynamic watermark features.

The video stream is encrypted for highest security. This video is displayed using our WordPress plugin. The annotation features included in the video are:

  • User name
  • User IP
  • User email

The dynamic watermark can be customized for movement, color, size and transparency. You can try the watermark feature on your own website by signing up for a free trial on our home page.

To play the video given below on Android, you would need to install our app – Zen Player – from the Play Store. To integrate videos to your app you can use VdoCipher SDK for easy playback.

Videos streamed on VdoCipher are protected from unauthorized downloads. Our WordPress plugin generates dynamic URLs which make it impossible for anybody to download the video content. If you have built your own video website from scripting languages such as Python, Ruby, PHP or .NET, you can refer our API page on how to embed secure videos to your website. Videos hosted through VdoCipher cannot be downloaded.

There is however still the risk of screen capture. Our watermark feature attempts to eliminate piracy originating from screen recording. The watermark overlays user identifiable information, such as name, IP and email address on top of the video. This considerably reduces risk of piracy from screen capture. Our users value the watermarking feature as it provides immense revenue security for them.

To generate a watermark you essentially need a JSON string describing how and what you will overlay on your protected videos. In this blog we will be detailing how to integrate Dynamic, Static and Image watermark to your videos.

How to get started?

We are assuming that you have uploaded your video to your VdoCipher account and are ready to embed the video either using WordPress plugin or implementing the API yourself. In both the cases, you would need to pass a JSON string as annotation code. The JSON string would contain all the information about the watermark. A JSON string is a universal form of representing structured data in a way that machines can understand.

Here is a sample JSON string that adds a moving (dynamic) watermark, static watermark and image watermark, respectively.

[

{'type':'rtext', 'text':'moving text', 'alpha':'0.8', 'color':'0xFF0000','size':'12','interval':'5000'},
{'type':'text', 'text':'static text', 'alpha':'0.5' , 'x':'10', 'y':'100', 'color':'0xFF0000', 'size':'12'},{'type':'image', 'url':'https://example.com/url/to/image.jpg','alpha':'0.8', 'x':'100','y':'200'}
]

Technically, this is an array of JSON objects, where each object describe a single annotation item.

Each of these items will be described by its parameters. Every item requires a type parameter which defines the type of watermark. The type of watermark can be either a moving text, a static text, or a static image. The rest of the parameters depends on the type.

Following is a short description of how each parameter affects the display of text and image.

Moving text

[{
'type':'rtext',
'text':'Name: {name}, email: {email}, IP: {ip}, Date: {date}',
'alpha':'0.8',
'color':'0xFF0000',
'size':'12',
'interval':'5000',
'skip':'2000'
}]
Type of text – Moving watermark

Set type parameter as rtext for Dynamic watermark

'type':'rtext',
Set the text to be shown
'text" : 'Enter whatever text you like to be displayed',

You can add user identifiable information, such as user name, user email, user IP, and date

  • ‘text’: ‘{name}’,
  • ‘text’: ‘{email}’,
  • ‘text’: ‘{ip}’,
  • ‘text’: ‘{date}’,
'text':'Name: {name}, email: {email}, IP: {ip}, Date: {date}',
Specify text opacity

This is the opacity of the text. For full opacity keep alpha value 1.

'alpha':'0.8',
Specify text color

This is the hex value of the watermark text color. You can pick your choice of color and its corresponding hex value from the following page on W3schools.

'color':'0xFF0000',
Specify the font size

This is the font size

'size':'12',
Specify the interval over which watermark changes position

The value is the interval in milliseconds when the text changes position

'interval':'5000',
Skip feature for watermark

It is possible to have watermark skip for some time between two overlays. Here is a sample code for it –

'skip':'2000'
Some important things to keep in mind about Watermark
  • Note that both the name and the value of these parameters should be in quotes. This rule applies to both text as well as numbers.
  • Each parameter is to be separated by comma. There should not be a comma after the last parameter for the dynamic watermark video settings.

Static text

[{
'type' : 'text',   //This defines the type of annotation item to static watermark
'text' : 'the text you like to be displayed',
'x' : '10',  //the distance from the left border of video.
'y': '50',  //the distance from the top border of video.
'alpha': '0.8', //the opacity of the rendered text, 0 is invisible, 1 is full opaque
'color':'0xFF0000',    //the color of the text specified as hexadecimal or uint
'size':'12' //Height of the text, in pixels.
}]

Image

[{
'type' : 'image',
'url' : 'http://example.com/path/to/image.png',     // the direct link of image
'x' : '10',
'y' : '100'
}]

Final Step

Now you need to integrate the above watermark info in your actual video. Pass this json string as a post parameter when making the OTP call with key value annotate. Note that, our current v2 API requires post data to be sent as Content-Type: application/x-www-form-urlencoded  . So, there will be two different post keys: 1) clientSecretKey 2) annotate

Only if you are writing the http requests from scratch you will need to url encode the json string when appending it to the post data. Most web frameworks have inbuilt method of generatig post data. In such cases, you should ensure that data is not doubly encoded i.e. just set the json string when calling your web framework’s addPostParam() method.

The watermark implementation explained above works with flash player on desktop. For html5 player, a different kind of watermark with code is possible. The link and sample to implement html5 watermark player  is here.

Still having problems with the dynamic watermark on video code? Send us the code you are using and the output you wish to be shown to info@vdocipher.com

You may also like...