Watermark

Note

This feature is available only to ByteArk Video Cloud for Business customers. Please contact sales@byteark.com if you would like to use it.

ByteArk Player SDK for Web can render a text watermark over the video to identify each individual viewer. The mark flashes at a random position inside the player, so a screenshot or a screen recording of any reasonable length carries the text, giving you a forensic trace back to the leaking viewer.

The watermark is a deterrent, not DRM: it is a text overlay drawn over the video. If you need encryption and rights management, see Google Widevine and Apple FairPlay as well.

Watermark display

Note

The example above uses a shorter interval and displayDuration than the defaults so the watermark appears sooner.

The mark appears briefly at a random position inside the player, hides, and reappears at a new random position on a loop. How long it stays visible and hidden is set by displayDuration and interval.

When a viewer pauses mid-playback, the mark is held visible for the whole pause, and it returns to the normal cycle when playback resumes.

Enable

Enable the watermark by setting plugins.bytearkWatermark in options when creating the player, along with the text you want to display.

var player = bytearkPlayer('video-player', {
  sources: [
    // source object
  ],
  plugins: {
    bytearkWatermark: {
      text: '<YOUR_VIEWER_IDENTIFIER>'
    }
  }
});

All options, including text, are set when the player is created and cannot be changed afterwards. If the viewer identifier depends on another step such as a login, wait until you have it before creating the player.

Options

Name	Type	Required	Default Value	Description
text	String	Yes	-	Plain text to render as the watermark. Rendered as-is, not a template.
color	String	No	'#ffffff'	CSS color of the text.
opacity	Number	No	0.35	Opacity of the mark, between 0 and 1.
fontSize	Number	No	48	Maximum font size in px. The mark scales with player width up to this cap.
fontFamily	String	No	'inherit'	CSS font-family for the mark.
fontWeight	Number|String	No	'inherit'	CSS font-weight for the mark.
textShadow	Boolean	No	true	Apply a faint drop shadow so the mark stays legible over any video frame.
interval	Number	No	30000	Hidden duration between flashes, in milliseconds.
displayDuration	Number	No	10000	Visible duration of each flash, in milliseconds.
showWhenPaused	Boolean	No	true	Hold the mark visible for the whole time the video is paused mid-playback. Set false to keep the flash cycle running independent of play and pause.
maxWidthPercent	Number	No	80	How wide the mark may grow, as a percent of player width, before its text wraps to the second line. Must be greater than 0 and no more than 100.

Font size and text wrapping

The font size scales with the player width up to the fontSize cap and never below a legible minimum, so the mark stays readable on large players and is not oversized on small embeds. Long text such as an email wraps to a second line rather than truncating, so the identifier stays complete.

On a player too small to fit the mark at that legible minimum, the font is shrunk below it as a last resort so the whole mark still stays inside the frame.

Effect on Picture-in-Picture and fullscreen

For security, when this watermark plugin is enabled, ByteArk Player must adjust the following behavior automatically.

Behavior	Result
Picture in Picture	Disabled, and the Picture-in-Picture button is removed from the control bar
Fullscreen on iOS and iPadOS	Uses CSS full-window expansion instead of native fullscreen, so the mark stays visible
Fullscreen on desktop and Android	Uses native fullscreen as usual, and the mark stays visible

Limitations

Surface	Watermark	Notes
Desktop, Android, iPad inline	Shown	Standard case
Desktop, Android, iPad fullscreen	Shown	The player stays in the page
iPhone fullscreen	Shown	Through CSS full-window expansion
Picture in Picture	Not shown	The OS shows the video frame only (ByteArk Player disables it by default)
Casting via Google Chromecast or Apple AirPlay	Not shown	The receiving device plays the video file directly and receives nothing from the sending page

Security and privacy notes

Caution

Whatever you set in text is visible on screen to everyone watching, and it is the first thing someone redistributing the content will try to crop out. Prefer an opaque per-viewer or per-session identifier that you can map back to an account on your side, rather than personal data.

Building and storing the mapping between a session and its watermark text, along with any personal data protection obligations (PDPA and equivalents) arising from displaying it, is the integrator's responsibility.

Example

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <div id="video-player"></div>
    <script src="https://byteark-sdk.cdn.byteark.com/player/v2/byteark-player.min.js"></script>
    <script>
      var player = bytearkPlayer('video-player', {
        fluid: true,
        poster: '/assets/samples/player/images/poster-big-buck-bunny.jpg',
        sources: [{
          title: 'Big Buck Bunny',
          src: 'https://byteark-playertzxedwv.stream-playlist.byteark.com/streams/TZyZheqEJUwC/playlist.m3u8',
          type: 'application/x-mpegURL',
        }],
        plugins: {
          bytearkWatermark: {
            text: '<YOUR_VIEWER_IDENTIFIER>',
            opacity: 0.4,
            fontSize: 40,
            interval: 30000,
            displayDuration: 10000
          }
        }
      });
    </script>
  </body>
</html>