Player Customization — Ansdev Cloud Docs

The Player SDK accepts a JSON theme object — colors, controls, behaviour, and integrator branding all configured declaratively.

Quick example

const player = new AnsdevPlayer({
  container: '#player',
  videoId: 'vid_abc123def456',
  playbackToken: 'pt_eyJhbGciOi...',
  theme: {
    colors: {
      primary: '#22D3EE',
      background: '#0F172A',
      controlBar: 'rgba(15, 23, 42, 0.8)',
    },
  },
  brand: {
    name: 'Acme Inc.',
    logo: 'https://example.com/logo.png',
  },
});

Colors

Token	Purpose
`primary`	Accent — seek progress, play button, focus ring
`secondary`	Hover states, secondary buttons
`background`	Player chrome background
`text`	Caption + UI text
`controlBar`	Bottom control bar fill (supports `rgba()`)

Quality-reactive accent

A signature feature: the accent colour shifts to match the currently playing rendition. Helpful as a glance-level quality indicator.

Quality	Accent
360p	Neon Rose `#F43F5E`
480p	Neon Amber `#F59E0B`
720p	Neon Emerald `#10B981`
1080p	Cyan `#22D3EE` (default)
4K	Purple `#9333EA`

Enable via theme.qualityReactive: true. Seekbar, glow, and quality indicators all morph together.

Controls

Show or hide individual controls:

controls: {
  playPause: true,
  volume: true,
  quality: true,
  fullscreen: true,
  speed: true,
  captions: true,
  progressBar: true,
  timeDisplay: true,
  pictureInPicture: true,
}

Any control you omit defaults to enabled.

The "Powered by Ansdev Cloud" watermark is always present in the free tier and cannot be removed. Your brand appears alongside it, not in place of it. White-label removal is part of the upcoming Scale plan.

Behaviour

behaviour: {
  autoplay: false,
  loop: false,
  muted: false,
  preload: 'metadata',     // 'none' | 'metadata' | 'auto'
  hotkeys: true,
  defaultQuality: 'auto',
  defaultSpeed: 1,
}

Full theme example

{
  theme: {
    colors: {
      primary: '#22D3EE',
      secondary: '#9333EA',
      background: '#0F172A',
      text: '#F8FAFC',
      controlBar: 'rgba(15, 23, 42, 0.85)',
    },
    qualityReactive: true,
  },
  brand: {
    name: 'Acme Learning',
    logo: 'https://cdn.example.com/logo.svg',
  },
  controls: {
    speed: true,
    captions: true,
    pictureInPicture: true,
  },
  behaviour: {
    autoplay: false,
    preload: 'metadata',
    hotkeys: true,
  },
}

CSS variables (advanced)

For pixel-level overrides, target the player root via CSS variables:

ansdev-player {
  --ansdev-primary: #22D3EE;
  --ansdev-control-bar-radius: 12px;
  --ansdev-font-family: 'Inter', sans-serif;
}

The full variable list is exposed in the SDK runtime as AnsdevPlayer.cssTokens.