PallyCon Visible Watermarking Guide

Overview

PallyCon Visible Watermarking is a watermark solution for HTML5 players to identify the user when video content is leaked illegally.

Since user information is displayed on the recorded video, the effect of suppressing illegal leak attempts can also be expected, and it can be used as a supplement to the screen recording issue of the Chrome browser, which cannot be prevented 100% with multi-DRM solution alone.

This document is based on Visible Watermarking SDK version 1.3.0.

Key Features

The main features of Visible Watermarking SDK are:

  • Support various HTML5 players
  • Display a dynamic watermark string in the form of an overlay on the video screen
  • Multiple watermark strings can be displayed
    • Display various information such as user name, ID, IP address sequentially
  • Watermark can be displayed in random positions periodically so that it cannot be easily masked or erased
  • Adjust watermark display time and interval
  • Prevention of debugging through JavaScript obfuscation
The ‘VideoJS version’ Visible Watermarking product that was previously provided separately from the SDK has been replaced by the SDK version and is no longer provided. If you want to use Visible Watermarking with VideoJS player, please refer to the guide below and Readme.demo.en.md file included in the SDK to integrate VideoJS with the SDK version.

HTML5 Player Integration

Visible Watermarking can be added to any HTML5 player through the following APIs provided by the SDK.

// Create a watermark object.
// playerId is the ID of the player object used.
var watermark = new PallyconWatermark(playerId);

// Set the horizontal and vertical length of the content to be played.
// After the content loading of the player is completed, it should be possible to get the size information of the content.
watermark.setVideoSize(videoWidth, videoHeight);

// Set font, watermark, etc.
watermark.setWatermarkData(object);

// Register the callback function to receive the player's end or stop command.
// Called when the object with the player id disappears.
watermark.setForceStopCallback(callback);

// Register a callback function that will receive a command when an error occurs during the initial setting of the watermark.
// Watermark does not work when the corresponding callback function is called.
watermark.setFailedSettingCallback(callback);

// Display the watermark on which the setting(interval and peakduration) is completed.
watermark.start();

// Stop the watermark
watermark.stop();

// Hide the watermark currently displayed on the screen.
// Call to change the screen size, reset VisibleWatermark, etc.
watermark.hideAll();

// You can check whether VisibleWatermark is operating normally.
watermark.isAlive();

Product Authentication

PallyCon Visible Watermarking product requires customer authentication.
To do this, you need to set the site ID issued when signing up on the PallyCon site.
If the ID is not correct, Failed setting callback function will be passed, and the watermark will not work properly.
When authentication fails for the entered siteId, the watermark message is fixed as ‘PallyCon VW Trial’.

// After signing up for PallyCon service, enter the 4-digit site ID value displayed on the console
object.siteId = "YOUR_SITE_ID";
watermark.setWatermarkData(object);

Service Domain Registration

For the product authentication, the domain of the web service to which the product will be applied must be registered. Log in to the PallyCon console site and enter the domain information in the Service URL field in the Settings > Service Settings screen after choosing Visible Watermarking in Service Plan.

  • When applying to the default domain and all sub-domains: e.g. https://*.test.com
  • Applying to a specific sub-domain only: e.g. https://123.test.com

For sites that do not apply HTTPS, you can enter ‘http’ in the protocol section. You can also enter an IP address instead of a domain.

Only one service domain can be registered per site ID of the PallyCon service account. If you need to apply Visible Watermarking to multiple service domains, please create a new account or create additional sites through the ‘Request to add sites’ function.

Watermarking Parameter

You can set the watermark-related settings using the setWatermarkData function.

let object = {
  siteId: "",
  fontsize: "small",
  opacity: 0.8,
  interval: 5,
  peakduration: 2,
  positiontype: {fixed: "rightbottom"},
  msg: ["inka", "inka@inka.co.kr"],
  fadeAnimation: false
};
watermark.setWatermarkData(object);
  • siteId
    • The site id issued when using PallyCon service
    • The watermark does not work if not input
  • fontsize (default: medium)
    • Size of watermark text
    • Value: One of xsmall, small, medium, large, or xlarge (one of them)
    • Value: integer (set fontSize)
  • opacity (default: 0.8)
    • Maximum watermark brightness
    • Value: Real number between 0 and 1.0
  • interval (default: 60))
    • Watermark display interval (second)
    • Value: Integer
  • peakduration (default: 2)
    • Watermark display time (second)
    • Value: Integer
  • positiontype (default: random: 85)
    • Watermark location option
    • Value: fixed, margin, random, edge
      • fixed
        • Fixed position
        • Values: lefttop, righttop, center, leftbottom, rightbottom
      • margin
        • Specify the location you want to show yourself
        • Value: left:number;right:number;top:number;bottom:number
        • ex: left:10;top:10
        • 10 means a percentage number 0 to 100 integer
        • When inputting both left and right, only left is applied, when inputting top and bottom, only top is applied
      • random
        • Percentage of the area where watermark is to be displayed in the entire area of ​​the video
        • Value: Real number between 0 and 100
      • edge
        • Percentage of the entire area of ​​the video where watermark is not displayed
        • Value: Real number between 0 and 100
  • msg
    • watermark messages
    • Can be set up as a string array (unlimited characters)
      • Example: [“123456789ABCDEF”, “GHIJKLMNOPQR”]
    • Can be set to a single string. Characters longer than 32 are wrapped
      • Example: “123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ”
        “123456789ABCDEFGHIJKLMNOPQRSTUVW
        XYZ”
    • Can be set wrap a string. add the character ‘<br>’ in the middle of the string
      • Example: “123456789<br>ABCDEFGHIJKLMNOPQRSTUVWXYZ”
        “123456789
        ABCDEFGHIJKLMNOPQRSTUVWXYZ”
  • fadeAnimation (default: true)
    • Can enable/disable fade animation
    • Value: Boolean

Trouble Shooting

Security of watermark

  • Problem Watermark can be tempered by manipulating function and class that call the VisibleWatermarkingSDK.

  • Solution

    1. Use immediately-invoked function to modularize classes that call the VisibleWatermarkingSDK.
    2. You can protect the classes that call the VisibleWatermarkingSDK bu using uglyfy-js or JavaScript Obfuscator Tool.

iOS player configuration

  • Problem On iOS browser, Native Player works instead of HTML5 player and VisibleWatermarkingSDK does not work.

  • Solution

    1. Add playsinline option inside the video tag.
    <video id="my-player" class="video-js" playsinline controls preload="auto" width="1200" height="650" />
    
    1. Delete the fullscreen button.
    player.ready( function() {
      var fullScreenControl = document.getElementsByClassName("vjs-fullscreen-control")[0];
      if (check if it's iOS) {
        fullScreenControl.parentNode.removeChild(fullScreenControl);
      }
    }
    

Picture in Picture(PIP)

  • Problem
    Visible watermarking is not supported in PIP mode. Therefore, playback will be canceled when the user selects PIP mode.

  • Solution Set ‘disablePictureInPicture’ in <video> to prevent user from selecting PIP mode.

Previous
Next