Skip to content

Video Player

The Audienzz Video Player renders outstream VAST video ads on publisher pages.

Features:

  • Muted inline autoplay that starts when the slot first becomes visible (the ad request itself is sent immediately). Playback pauses when the slot leaves the viewport or the tab goes to the background, and resumes once it is visible again.
  • Controls: ad disclosure label, close, mute, play/pause, a skip button when the ad is skippable, and the AdChoices icon.
  • Endcard with a replay button after the ad completes. Replays re-play the already-delivered media locally and do not fire a new impression or quartile events.
  • TCF v2 and GPP consent signals are read from the page CMP and forwarded with the ad request.
  • Rendering and tracking use the Google IMA SDK, loaded at runtime from imasdk.googleapis.com.

There are two integration options: through Headertag or standalone via the JavaScript API.

In pages running Htag, the player is enabled with an opt-in flag. Set it on the top window before Htag starts:

window.htag = window.htag || { que: [] };
window.htag.vastAdnzPlayerEnable = true;

With the flag enabled, outstream video placements configured in Adconsole render with the Audienzz Video Player. Placement configuration, ad refresh and teardown work as before; no other changes are required. When the slot cannot show an ad (no fill, loading or playback failure), the integration reports it to Htag, which cleans the placement up the same way as for any other empty slot.

The bundle is served from the CDN and exposes a single global, window.adnzVP:

<script async src="https://cdn.adnz.co/video-player/video-player.iife.js"></script>

Render an ad into a slot:

const handle = window.adnzVP.renderVideoAd({
vastUrl: 'https://secure.adnxs.com/ptv?id=12345678',
targetEl: document.getElementById('video-slot'),
renderMode: 'native',
});
handle.on('no-fill', () => {
// reclaim the slot, show fallback content, ...
});

The full configuration, events and lifecycle are described in the API reference.

  • The slot element must be at least 256×256 px (IAB minimum); renderVideoAd rejects smaller slots.
  • The slot must be sized by the page; the player fills the box it is given.
  • native — the player renders directly into the page. Player styles are scoped to its own DOM and do not affect the rest of the page.
  • iframe — the video engine renders inside a same-origin iframe while the controls stay on the parent page. Use this mode for complete style isolation, e.g. when the page runs its own video.js instances.

Pages enforcing CSP need to allow at least:

  • script-src: https://cdn.adnz.co (player bundle), https://imasdk.googleapis.com (IMA SDK)
  • style-src: the player injects its stylesheets as <style> elements — allow them via a nonce (see below) or 'unsafe-inline'
  • connect-src, img-src, media-src: the ad server and its tracking/CDN domains — for Xandr, *.adnxs.com and *.adnxs-simple.com — plus https://imasdk.googleapis.com

The exact set of tracking domains depends on the campaigns served.

Put the page nonce on the script tag that loads the bundle — either the standard nonce attribute or data-nonce (useful because browsers hide nonce from the DOM):

<script async src="https://cdn.adnz.co/video-player/video-player.iife.js" nonce="{server-generated}"></script>

The player captures the nonce at load time and applies it to everything it injects: its style elements (including the one inside the same-origin iframe in iframe render mode) and the IMA SDK script tag. In the Headertag integration this happens automatically — Htag passes its own captured nonce along when it loads the bundle.

In the Headertag integration, teardown is handled automatically on ad refresh and placement removal. In standalone integrations, call handle.dispose() when the route or view unmounts — it removes the ad, its DOM and all listeners.