Videojs VAST Plugin

VAST PLUGIN PRO

Video Player is loading.

Current Time 0:00

Duration 0:00

Loaded: 0%

Stream Type LIVE

Remaining Time 0:00

ZOOM HELP

Drag zoomed area using your mouse.

100%

VAST EVENTS

More VAST Examples
Discover more potential of VAST advertising, including vast icons, nonlinear ads, ad companions and sequential ad pods

The VAST PRO plugin developed by Nuevodevel.com implements the IAB specifications of VAST 3 and VAST 4. The plugin supports VMAP specification or a custom list to play multiple ads at the desired time position (pre-roll, mid-roll, post-roll). Apart from linear video ads, the VAST PRO plugin also supports nonlinear ads, industry icons, and ad companions. Sequential ads, as defined in the VAST 3 specification as ad pods, are supported as well. The plugin includes the option to create an ad waterfall to maximize ad revenue by attempting to show a valid ad.

The plugin setup is not difficult.

Code snippet

Load player skins css stylesheet in website HEAD or BODY element.
<link href="/videojs/skins/skin-name/videojs.min.css" rel="stylesheet" type="text/css" />

Load player, vast pro and nuevo plugin javascripts
<script src="/videojs/video.min.js"></script>
<script src="/videojs/nuevo.min.js"></script>
<script src="/videojs/plugins/vastpro.js"></script>

Initialize player and plugins
<script>
const options = { option1: value, option2: value, option3: value }; Nuevo plugin options
const player=videojs("'example_video_1", {license: "key"});
player.nuevo({ options });
player.vast ({ tagURL: "vast-ad-tag-url-here" });
</script>

Initially, the plugin makes XMLHttpRequest a false flag for the withCredentials property. This means that cookies are ignored in the XMLHttpRequest response. XMLHttpRequest responses from a different domain cannot set cookie values for their own domain unless withCredentials is set to true before making the request. You can enable the withCredentials flag in an easy way:

Code snippet

player.vast ({ tagURL: "vast-ad-tag-url-here", withCredentials:true });

The withCredentials flag can also be enabled in the VAST configuration declaration. It an be implemented as a global options object or separately for each single ad from the list of ads.

Code snippet

player.vast ({
tagURL: "vast-ad-tag-url-here",
options: {
widthCredentials: true,
timeout: 6000,
clickthroughMethod: "link",
target: "_self"
}
});

Below, you can find a list of configuration options available to adjust.

withCredentials: (Boolean, default: false) - A boolean to enable the withCredentials options for the XHR URLHandler.
timeout: (Number, default: 6000) - A custom timeout for the requests in milliseconds.
target: (String, default: "_blank") - Ad link target. Set it "_self" to open ad link in the same window.
allowMultipleAds: (Boolean, default: true) - A boolean value that identifies whether multiple ads are allowed in the requested VAST response.
allowAdPods: (Boolean, default: true) - A boolean value that identifies whether multiple adPods are allowed to play.
cancelAdPods: (Boolean, default: false) - A boolean value that identifies whether possible adPods should be cancelled when precedind adPod was skipped.
clickthroughMethod: (String, default: player) - Set link to display the ad's link in the bottom left corner instead of clickable full-size window.
nonlinearRecall: (Boolean, default: false) - Set true to enable the Recall button for nonlinear static asset.
closeNonlinearButton: (Boolen, default: true) - Allows to show a close button for static nonlinear ad.
closeNonlinearTheme: (String, default: light) - Set dark to change the nonlinear close button theme.

Tracking Ad Events

VAST tracking is implemented using a number of individual VAST tracking elements that map to video events, such as video start or video completion. Each of these elements contains a reference to a server-side resource and is counted by the ad server or other measurement vendor.
Linear video events available to track are: start, firstQuartile, midpoint, thiirdquartile, play, resume, mute, unmute, fullscreen, exitFullscreen, skip, complete, clickthrough.
For industrial icons, view and clickthrough events are available to track. For nonlinear ads and companions, possible events to track are impressions and clickthrough.

The same set of events is triggered by the plugin, so the user can track events in Javascript, just like on this demo page.

Code snippet

player.on("vastEvent",function(e,data) {
console.log( data.eventName );
console.log( data.adType );
)}

VAST macros

VAST macros enable the video player to provide certain details to the ad server at the time tracking URIs are accessed. Macros are automatically replaced by the player when pinging tracking URIs. All macro names are surrounded by square brackets, for example:[EXAMPLE].The Vast Pro plugin supports the following generic macros:

[CACHEBUSTING] - replaced with a random 8-digit number
[TIMESTAMP] - replaced with a date and time at which the URI using this macro is accessed.
[DOMAIN] - replaced with domain name where the end user will view the ad.
[PAGEURL] - replaced with the full URL of the page where the end user will view the ad.
[DEVICEUA] - replaced with the User-Agent of the device that is rendering the ad to the end user.
[ADPLAYHEAD], [CONTENTPLAYHEAD] - replaced with the current time offset “HH:MM:SS.mmm”.
[PLAYERSTATE] - replaced with the options indicating the current state of the player, e.g. “muted,fullscreen”.
[PLAYERSIZE] - replaced with integer width and height of the player measured in css pixels, separated by coma.
[ADTYPE] - replaced with the type of the ad (linear video, companion, nonlinear).
[ADSERVINGID] - replaced with the value of the <AdServingId> for the currently playing ad.
[UNIVERSALADID] - Indicates the creative, using UniversalAdId space separating registryID and value. Multiple UniversalAdID are coma separated.

Ad Info Icon

The VastPro plugin, like other advertisement plugins by Nuevodevel allows to display a clickable Ad Info icon, like in the example above. Enough is to provide the info page URL through the appropriate Nuevo plugin's option:

Code snippet

player.nuevo({adIndo: "ad-info-URL"});

Internalization

There are a few text strings related to advertising that appear in the player. You can translate them into a chosen language file. Check out the Languages demo to learn how to load and use any language other than English.

The VAST PRO plugin is a separate product, working with th video.js player and Nuevo plugin.
A lifetime license can be ordered upon the first Nuevo software order, or at any time later in the client area.