Gumlet Dynamic Watermark

Moving text overlay for <video> elements. Discourages screen capture and identifies the viewer. Matches the behaviour used by the Gumlet embed player (blink visibility, random reposition, anti-tamper reload).

Prerequisites

• Node >= 22.x

Install

npm install @gumlet/dynamic-watermark

ESM / Next.js

'use client'

import { useEffect, useRef } from 'react'
import { addWatermark } from '@gumlet/dynamic-watermark'

export function WatermarkedVideo() {
  const videoRef = useRef<HTMLVideoElement>(null)

  useEffect(() => {
    if (!videoRef.current) return

    const watermark = addWatermark(videoRef.current, {
      text: '[email protected]',
      fontColor: 'red',
      backgroundColor: 'rgba(0, 0, 0, 0.2)',
      interval: 5000,
      visibilityDuration: 1000,
      fontSize: '16px',
    })

    return () => watermark.destroy()
  }, [])

  return <video ref={videoRef} controls src="..." />
}

Script tag (CDN)

<script src="https://cdn.gumlytics.com/watermark/4.0/gumlet-dynamic-watermark.min.js"></script>
<script>
  const video = document.querySelector('video')
  const watermark = window.gumletWatermark.add(video, {
    text: '192.168.1.1',
    interval: 5000,
    visibilityDuration: 1000,
  })

  // Later:
  // watermark.destroy()
</script>

addWatermark(target, options)

| Argument / option | Description | Default | | --- | --- | --- | | target | HTMLVideoElement, video element id, or container id that nests a <video> | — | | options.text | Overlay text | required | | options.fontColor | Text color | 'red' | | options.backgroundColor | Overlay background | 'rgba(0, 0, 0, 0.2)' | | options.interval | Full cycle length (ms) and reposition / tamper-check interval | 1000 | | options.visibilityDuration | Visible portion of each cycle (ms). Shorter than interval → blink | interval | | options.fontSize | CSS font-size | '16px' | | options.id | DOM id for the overlay element | auto-generated | | options.container | Element that receives the overlay | Plyr wrapper or video parent | | options.zIndex | Overlay z-index | '2147483647' | | options.onTamper | Called on tamper: remove, text/class/id/style change, inline hide, or reparent | destroy videos + reload |

Anti-tamper watches the overlay with a MutationObserver (and a periodic check). Reposition (left/top) and blink opacity from the Web Animations API do not count as tamper. destroy() disconnects observers and removes the node without calling onTamper.

Returns a handle with destroy() (safe cleanup, no tamper reload) and element.

Publish

Tag a semver release (e.g. 4.0.0). CI publishes to npm and deploys the IIFE to s3://gumlet-cdn/watermark/{major.minor}/.