Videojs VAST Plugin

VAST plugin for video.js player with Nuevo plugin and skin implements IAB specifications of VAST 3, VAST 4 for linear ads (rendered through VAST 3). The plugin supports only HTML5 ads. Each video.js skin by Nuevodevel was individually designed for VAST ads. The plugin supports the VMAP protocol or an array of multiple tagURLs to play multiple ads, including preroll, midroll, and postroll ads.
The basic single VAST preroll ad setup is fairly simple.

Code snippet

Load player skin and scripts inside BODY element.<link href="/videojs/skins/skin-name/videojs.min.css" rel="stylesheet" type="text/css" />
<script src="/videojs/video.min.js"></script>
<script src="/videojs/plugins/vast.vpaid.min.js"></script>
<script src="/videojs/nuevo.min.js"></script>
Setup HTML5 video to play
<video id="my_player" class="video-js" controls preload="auto" playsinline width="640" height="360" poster="//www.domain.com/path/to/poster.jpg">
<source src="//www.domain.com/path/to/video.mp4" type="video/mp4" /&glt;
<source src="//www.domain.com/path/to/video.webm" type="video/webm" />
</video>
Initialize player and plugins
<script>
const player=videojs("my_player",{ license: "key"}});
const nuevo_options = { option1: value, option2: value, option3: value }; Nuevo plugin options
player.nuevo( nuevo_options );
player.vastAds ({ tagURL: "your-vast-vpaid-ad-tag-here", id="unique ad ID"  });
</script>

Please note that, in addition to the tagURL, we also define a unique ID that can be useful for tracking purposes. You can also include and enable withCredentials property for XMLHttpRequest.

Code snippet

player.vastAds ({ tagURL: "your-vast-vpaid-ad-tag-here", id="unique ad ID", withCredentials:true });

Tracking Ad Events

In addition to the standard vast tracking events, the plugin allows you to track several ad events through javascript. Events fired are:

start, firstQuartile, midpoint, thridquartile, skip, complete, allAdsCompleted, click, pause, resume

Below, you can see an example javascript function that allows you to track events.

Code snippet

<script>
player.on('adEvent', function(event, data) {
var ad_id = data.id;
var event_type = data.type;
});{
</script>

Timeouts

The plugin makes use of several timeouts, two of which are crucial. An ad request timeout is used to connect with the ad XML URL. The ad cancel timeout is the time after which the ad is cancelled.For both timeouts, the value is 3000 ms (3 seconds). This is enough for most uses, but may not be enough for a slow 3G connection. The plugin includes options to change both timeouts in easy way.

Code snippet

player.vastAds ({ tagURL: "your-vast-vpaid-ad-tag-here", id: "uniqueId"}, {adRequestTimeout:5000,adCancelTimeout:10000}});

Oustream ad

It is possible to play VAST ad as an outstream ad. The video ad type must be linear creative preroll. You must enable Nuevo plugin's option to play VAST as an outstream ad.

Code snippet

player.nuevo({ outstream: true });

Ad Request and Reset

It is possible to reset Vast ads or request new Vast ads programmatically during video playback. This may be applicable for a live stream or when a video playlist item has changed.

Code snippet

player.on("playlist_change",function() {
player.vastAds.reset();
})
player.on("playlist_change",function() {
player.vastAds.reauest({ tagURL: "your-vast-vpaid-ad-tag-here" });
})

The VAST/VPAID plugin is included for free only in the GOLD version of the Nuevo plugin.