Videojs VAST/VPAID Plugin

VAST VPAID HTML5 Plugin Introduced

As far the only reliable option to play VAST ads was Ima plugin and Google Ima SDK library. It still suggested way to play ads by Google. It is also still fine to play simple VAST ads. However due to CORS issues Google Ima plugin is useless for more advanced VAST ads and for VPAID ads.

Now Nuevodevel presents experimental VAST/VPAID plugin dedicated for video.js player with Nuevo plugin and skin.The plugin implements IAB specifications of VAST 3, VAST 4 for linear ads (rendered through VAST 3) and VPAID. Since flash playback is depreciated for video.js player, the plugin supports only HTML5 ads. The plugin does not support VMAP specification, however allows to play a set of linear ads at desired time position. Eaach player skin by Nuevodevel was individually designed for VAST/VPAID ads.
The basic single VAST/VPAID 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="example_video_1" 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>
var options = { option1: value, option2: value, option3: value }; Nuevo plugin options
var player=videojs("'example_video_1");
player.nuevo( options );
Setup VAST/VPAID ad
player.vastAds ({ tagURL: "your-vast-vpaid-ad-tag-here" });
</script>

As you can see, the only difference in player setup code is to load vast.vpaid.js plugin and to set vast/vpaid tag (code marked in blue color).

For each vast/vpaid you can define unique ID, useful later to track vast/vpaid events through javascript.

Code snippet

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

For some types of vpaid ads you may find useful option to hide controlbar.

Code snippet

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

Tracking Ad Events

vast.vpaid plugin allows to track several ad events through javascript. Events fired are:

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

Below you have sample javascript function which allows to track events.

Code snippet

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

Timeouts

Vast/vpaid plugin makes use of several timeouts, two of which are crucial. Ad request timeout is used to connect with ad XML Url. Ad cancel timeout is 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"}, {adRequestTimeout:5000,adCancelTimeout:10000}});

How to setup multiple VAST ads

VAST/VPAID plugin is included only in GOLD version of Nuevo plugin.