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.
Headertag integration
Section titled “Headertag integration”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.
Standalone integration
Section titled “Standalone integration”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.
Slot requirements
Section titled “Slot requirements”- The slot element must be at least 256×256 px (IAB minimum);
renderVideoAdrejects smaller slots. - The slot must be sized by the page; the player fills the box it is given.
Render modes
Section titled “Render modes”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.
Content Security Policy
Section titled “Content Security Policy”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.comand*.adnxs-simple.com— plushttps://imasdk.googleapis.com
The exact set of tracking domains depends on the campaigns served.
Nonce-based policies
Section titled “Nonce-based policies”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.
Single page applications
Section titled “Single page applications”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.