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 (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.

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.

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.

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

Reset VAST/VPAID Ads

Some of our users requested an option to reset ads. mostly to reuse ads for new video from playlist or for new video loaded programmatically. Usually such option is called then when current video ends, though can be called any time. It's important to check first if ad is not currently playing.

<script>
player.on("ended"), function() {
   if(player.adPlaying!=true) {	
	player.resetVast();
   }
});
</script>

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.

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