Section:

Watermark videos using JavaScript

WebViewer Video allows you to place your own custom watermark on top of the video.

Apryse Docs Image

You can use the WebViewer setWatermark API. Please see the WebViewer watermark guide for more.

Option shouldDrawOverAnnotations must be passed in when setting the watermark, in order to show up on the video canvas.

JavaScript

1WebViewer(...)
2    .then(function(instance) {
3      const license = '---- Insert commercial license key here after purchase ----';
4      initializeVideoViewer(instance, { license });
5
6      const { documentViewer } = instance.Core;
7
8      documentViewer.setWatermark({
9        shouldDrawOverAnnotations: true, // Enable watermarks for video
10        // Draw diagonal watermark in middle of the document
11        diagonal: {
12          fontSize: 25, // or even smaller size
13          fontFamily: 'sans-serif',
14          color: 'red',
15          opacity: 50, // from 0 to 100
16          text: 'Test Watermark'
17        },
18        // Draw header watermark
19        header: {
20          fontSize: 10,
21          fontFamily: 'sans-serif',
22          color: 'red',
23          opacity: 70,
24          left: 'left watermark',
25          center: 'center watermark',
26          right: ''
27        }
28      });
29    });

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales