Videojs VAST/VPAID Plugin

AD EVENTS

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 (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 waterfall of 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 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/vpaid and nuevo plugin js
<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 vjs-default-skin" 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>

How to setup multiple VAST/VPAID ads

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