Native ad video player

The Native Ad Video Player is an implementation of the Xandr Vast Player designed to be used within the Xandr Native Renderer for use with Native Ads.

Features

The Xandr Vast Player is designed to provide the following features:

• Plays an ad video as delivered in VAST XML.
• You can pass the player the VAST XML in one of the following forms:
  • URL to a valid VAST XML
  • Direct VAST XML content
• Optionally, displays an pre-show banner image before the ad video plays.
• Optionally, displays a post-show banner image after the ad video plays.
• Optionally, supports a click through if the user clicks on the post-show banner image.
• Optionally, reports a click tracking event if the user clicks on the post-show image.

API entry point

To get the player to play the native video, you must utilize the playNativeAdVideo function. This function passes targetDiv, vast, options, bannerOptions, and  notificationCallback as arguments.

Arguments

How to invoke?

The Xandr Native Ad Renderer should do the following to use the Native Ad Video Player within a native ad:

1. Load the Xandr Vast Player. The Xandr Vast Player will automatically assign the player a variable named APNVideo_VastVideoPlayer which will be globally available within the Renderer's document window.
2. Create the div where the player will be located.
3. Construct the set of parameters that need to be passed into the native video player:

   1. A reference to the target div element where the player is located, as create in Step #2.

   2. Either the url to the target VAST xml or a String containing the VAST xml document itself.

   3. A Javascript object containing the set of player options which control the rendering of the video ad itself. For the list of rendering options supported, see Player Options.

   4. A Javascript object containing the set of banner options to be enforced by the native video player. These include:

      1. preBanner - image url (optional).
      2. postBanner - image url (optional).
      3. clickUrl - landing page when clicking on the postBanner (optional).
      4. trackingUrl - tracking url to report the click on the postBanner (optional).

   5. An optional notificationCallback function which the player will use to report status.

4. Initiate the Native Ad Video Player by calling the API entry point cited above.

Example

// Code has to be located within same document where the Native Renderer is located
  
// this will load the player and automatically create the APNVideo_VastVideoPlayer variable
var scr = document.createElement('script');
scr.type = 'text/javascript';
scr.src = ‘//acdn.adnxs.com/video/player/vastPlayer/XandrVastPlayer.js’;
document.getElementsByTagName('head')[0].appendChild(scr);
 
 
// once you know that the player has been loaded and you are ready to use it:
var targetDiv = document.getElementById(‘playerContainer’;
var options = {skippable : {enabled: false}};
var vastUrl = ‘http://path-to-my-xml.xml’;
 
var bannerOptions = {};
bannerOptions.preBanner = 'http://my-path-preshow.jpg';
bannerOptions.postBannder = 'http://my-path-postshow.jpg';
bannerOptions.clickUrl = 'http://my-fake-page.com';
bannerOptions.trackingUrl = 'http://my-tracking-url.jpg';
 
APNVideo_VastVideoPlayer.playNativeAdVideo(targetDiv, vastUrl, options, bannerOptions, function(eventCode, data) {console.log ("Native Notified: " + eventCode);});

Player options

Player options are passed into the Xandr Video Player in a Javascript object. The following options are supported:

Notification Callback

The Notification Callback has the following prototype: function callback (event, data) where: